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

About us card

Sienna

3 years ago

12.3k
Game Live Score
A live score game layout design perfect for your live scoring application

Diavox Jerome Soriano

1 year ago

1.5k
medical care
It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

Nishimwe Jeanine

1 year ago

1.1k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

3 months ago

332
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

CodewithFaraz

11 months ago

1.2k
3D card
it is a 3D card

Bonimater

1 year ago

1.5k
Event notification card

Odessa Young

3 years ago

9.9k
Card with Thumbnail
Post card with image

Mr Robot

4 years ago

12k
Blog Card
A blog card with dark-mode

Robert Chunga

1 year ago

2.7k
Form
form

Aman kumar

2 years ago

2.8k