Tailwind CSS Book

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author Michael Andreuzza

Tailwind v3.4 3.4k 6

Fork Fullscreen

<section class="bg-gray-200 flex flex-col items-center h-screen justify-center relative">
 <div class="w-full mx-auto max-w-7xl relative">
  <div class="max-w-sm mx-auto" style="box-shadow:0 65.2926px 52.2341px rgba(35,35,52,.2), 0 27.2777px 21.8221px rgba(35,35,52,.144), 0 14.584px 11.6672px rgba(35,35,52,.119), 0 8.17564px 6.54052px rgba(35,35,52,.1), 0 4.34202px 3.47362px rgba(35,35,52,.081), 0 1.80681px 1.44545px rgba(35,35,52,.056); background-image: linear-gradient(0deg, rgba(16, 130, 178, 0.58) 0%, rgba(16, 130, 178, 0.58) 13%,rgba(49, 137, 167, 0.58) 13%, rgba(49, 137, 167, 0.58) 42%,rgba(81, 143, 157, 0.58) 42%, rgba(81, 143, 157, 0.58) 49%,rgba(114, 150, 146, 0.58) 49%, rgba(114, 150, 146, 0.58) 58%,rgba(147, 157, 135, 0.58) 58%, rgba(147, 157, 135, 0.58) 69%,rgba(180, 164, 124, 0.58) 69%, rgba(180, 164, 124, 0.58) 74%,rgba(212, 170, 114, 0.58) 74%, rgba(212, 170, 114, 0.58) 78%,rgba(245, 177, 103, 0.58) 78%, rgba(245, 177, 103, 0.58) 100%),linear-gradient(90deg, rgb(180, 56, 238) 0%, rgb(180, 56, 238) 11%,rgb(190, 82, 231) 11%, rgb(190, 82, 231) 22%,rgb(201, 109, 225) 22%, rgb(201, 109, 225) 46%,rgb(211, 135, 218) 46%, rgb(211, 135, 218) 60%,rgb(222, 161, 212) 60%, rgb(222, 161, 212) 65%,rgb(232, 187, 205) 65%, rgb(232, 187, 205) 87%,rgb(243, 214, 199) 87%, rgb(243, 214, 199) 92%,rgb(253, 240, 192) 92%, rgb(253, 240, 192) 100%);">
   <div class="grid grid-cols-12 text-white">
    <div class="col-span-1 flex border-r border-gray-400 py-64"></div>
    <div class="col-span-11 flex flex-col justify-between p-6">
     <div class="mt-12">
      <p class="text-xs">By Michael Andreuzza</p>
      <p class="text-xl mt-3 lg:text-2xl font-medium leading-none">
       This book cover is made with Tailwind CSS
      </p>
     </div>
     <div class="flex flex-col justify-between text-xs w-full">
      <a href="https://michaelandreuzza.com/" target="_blank">Michaelandreuzza.com</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</section>
<div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
 <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
  <div class="flex w-0 flex-1 items-center p-4">
   <div class="w-full">
    <p class="text-sm font-medium text-neutral-900">Creative moments</p>
    <p class="mt-1 text-sm text-neutral-500">
     A book with only Tailwind CSS </p>
    <p class="mt-2 text-xs text-red-500 underline"> <a href="https://michaelandreuzza.com">
      by © Michael Andreuzza</a> </p>
   </div>
  </div>

</div>
</div>

Related Examples

animated blog cards with Tailwind CSS

Michael Andreuzza

2 years ago

6.2k
Chats Message Screen in neomorphism
light/dark chat screen

Akram Khan

2 years ago

2.9k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Nicole Shalom

1 year ago

1.8k
Weather info Card
Inspired from Mamba UI

Ron Hicks

4 years ago

12.7k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
card
card simple hover

Raul antonio de la cruz hernandez

7 months ago

668
Pricing card
basic pricing card with single price

Kaung Htet Min

10 months ago

546
Card animate

Raul antonio de la cruz hernandez

1 year ago

2k
User profile card

Mr Robot

3 years ago

12k
Responsive Card

ariaw

1 year ago

983
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

dev-fab250

1 year ago

1.4k
Profile card
tailwind Profile Card

Md. Tofayel islam

2 years ago

3.1k