Breaking News: Grepper is joining You.com. Read the official announcement!

tailwind page template responsive

astarrh answered on December 23, 2021 Popularity 10/10 Helpfulness 2/10

answer tailwind page template responsive

related tailwind responsive

tailwind page template responsive

Comment

<div class="flex flex-col bg-gray-200 h-screen">
  <div class="flex flex-row flex-auto gap-4">
      <div class="w-0 md:w-1/4"></div>
      <div class="flex flex-col bg-gray-100 w-1/2 h-full">
          <div class="flex flex-col gap-4 p-4 items-center">
              <p class="">Content Here.</p>
          </div>
      </div>
      <div class="w-0 md:w-1/4"></div>
  </div>
</div>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: responsive whatever

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

astarrh

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind responsive

Comment

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

ex. <img class="w-16 md:w-32 lg:w-48" src="...">
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 29 2022

Literate Lentil

0 Answers Avg Quality 2/10

tailwind responsive

Comment

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/store.jpg" alt="Man looking at item at a store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: tailwindcss.com

Tags: responsive r

Link to this answer
Share Copy Link

Contributed on Dec 23 2021

Lazy Lynx

0 Answers Avg Quality 2/10

tailwind page template responsive

Contents

More Related Answers

tailwind page template responsive

Closely Related Answers

tailwind responsive

tailwind responsive

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.