card

This tailwind example is contributed by 5upreme505, on 21-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author 5upreme505

1.3k

Fork Fullscreen

<div class="w-1/2 space-y-4 rounded-xl bg-white text-black">
    <div class=" space-y-4 ml-7 mt-14">
      <p class=" ">P E R F U M E</p>
      <h1 class="text-4xl font-bold">Gabrielle Essence Eau De Parfum</h1>
      <p class=" space-y-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non fugit nesciunt reprehenderit fugiat esse nam quam cupiditate animi recusandae laboriosam.</p>

</div>
      
      <div class=" items-center text-center  justify-center">
        <button class="text-white font-bold bg-green-800 py-4 px-20 rounded-xl">Add to card</button>
        </div>
    </div>
  </div>
</div>

Related Examples

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:

Author:
dev-fab250

4 months ago

400
Monkey card
First tailwind example

Author:
muhittin budak

5 months ago

413
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

3 months ago

304
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.7k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

5 months ago

689
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

6 months ago

1.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.5k
Card
Simple Card

Author:
Anonymous

5 months ago

646
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

4.9k
Horizontal card with image

Author:
Amit Pachange

3 years ago

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

Author:
Vikas Kushwah

5 months ago

722
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components