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.5k 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

Profile Card
User Profile Card with Name and Location

Anubhav Ranjan

2 years ago

3.3k
card
It's a product card

SAURAV SINGH

1 year ago

1.5k
Department Card

Ashok Kumar

2 years ago

2.8k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Vikas Kushwah

1 year ago

2.1k
Article-Post Preview card

Prashant

4 years ago

10.6k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

UI-Templates

1 year ago

1.5k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
KPI Cards
estilo Shopify / Stripe

Raul antonio de la cruz hernandez

11 months ago

579
Tailwind AoPS Demo - Isabel
Starter code for an interactive Tailwind Demo

Isabel McGuigan

2 years ago

3.3k
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

84
card
card simple hover

Raul antonio de la cruz hernandez

9 months ago

674
Product cards
Product cards for eCommerce

ehmasuk

1 year ago

1.4k