Tailwind css card

Card tailwind css

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
  </div>
</div>

Source: grepper.com

Tailwind CSS cards

<a href="#" class="block p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
    <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>

Source: flowbite.com

Tailwind CSS "Cards"

<!-- CSS https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css -->

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS - единственный фреймворк, который я видела масштабируемым в больших командах. Его легко настроить, адаптировать к любому дизайну, а размер сборки крошечный.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Сара Даян
      </div>
      <div class="text-gray-500">
        Штатный инженер, Алголия
      </div>
    </figcaption>
  </div>
</figure>

Source: tailwindcss.ru

Similar codes

1 vote127 views1 answer
Html bookmark spot
Html
0 vote121 views1 answer
Https://www.xnxx.com/video-rt4pdd3/lovely_latina_girlfriend_on_a_big_fat_dick
Html
-1 vote196 views3 answers
Xss commands
Html
5 votes107 views2 answers
Html u tag
Html
75 votes104 views6 answers
Button bootstrap
Html
14 votes98 views3 answers
Preview image before upload
Html
2 votes110 views2 answers
Remove space between columns in Bootstrap 4
Html
2 votes102 views2 answers
On enter press button
Html
0 vote125 views1 answer
Como ir para outra página em html
Html
91 votes114 views6 answers
Bootstrap 4 text color
Html