Home
Michael Andreuzza
Tailwind CSS Book

Tailwind CSS Book

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

Card

Author Michael Andreuzza

2.3k

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

Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

2 years ago

9.6k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

17.9k
Information card

Author:
Samuel Dawson

2 years ago

11.7k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

4 months ago

514
Hotel rooms
A simple room overview

Author:
Matti

7 months ago

1k
Hover effect card

Author:
Samuel Dawson

2 years ago

30.2k
cards
cards with background animation

Author:
Anonymous

2 years ago

10.9k
User Card

Author:
Md. Tofayel islam

7 months ago

928
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.

Author:
Nicole Shalom

2 months ago

428
Features grid

Author:
Sophia Baker

2 years ago

9.9k
Article card

Author:
Sienna

2 years ago

9.6k
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components