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

1.8k

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

cards
cards slices

Author:
Anonymous

1 year ago

5.8k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.4k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

9.2k
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

1 year ago

2.9k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

2 years ago

16k
Holiday package card
Responsive card

Author:
Aman kumar

1 year ago

5.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 weeks ago

59
404 Error card
Error card at the center

Author:
Shakti

2 years ago

8.6k
News Feed

Author:
Samuel Abera

2 months ago

488
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

2 years ago

16k
Responsive Article Section

Author:
Prashant

2 years ago

14.5k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

6 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components