Home
Ranit Saha
Simple Review Card

Simple Review Card

This tailwind example is contributed by Ranit Saha, on 24-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Ranit Saha

425

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  <div class="border shadow-teal-300 shadow-md max-w-2xl p-6 rounded-lg dark:bg-gray-700 dark:text-gray-300">
    <div class="flex gap-2 items-center">
      <img class="h-16 rounded-full w-16" src="https://images.unsplash.com/photo-1463453091185-61582044d556?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cGVvcGxlfGVufDB8MHx8fDE3NDI4MzI5MTR8MA&ixlib=rb-4.0.3&q=80&w=1080"/>
      <div>
        <h2 class="text-2xl ">@armedshutter</h2>
        <div class="flex space-x-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24" stroke="none">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
          </svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24" stroke="none">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
          </svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24" stroke="none">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
          </svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24" stroke="none">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
          </svg>
          
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24" stroke="none">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
          </svg>
        </div>
      </div>
    </div>
    <p class="text-wrap text-md font-semibold mt-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    </p>
    <a class="underline font-bold mt-10 text-blue-500 hover:pointer">See Review</a>
  </div>
</div>

Related Examples

Info card for admin panal
Show stats on your dashboard

Author:
Arya

2 years ago

12.5k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

2 weeks ago

113
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

1.8k
Subcribe Card - Alert - Notification

Author:
ABDO-SY

4 months ago

404
Info Card

Author:
Prem..

2 years ago

18.5k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

22.3k
Info card

Author:
Laurits

2 years ago

10.3k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

9.9k
Labs card
Lab item list card

Author:
Sedat Kumcu

8 months ago

1.4k
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

5 months ago

703
Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

3.3k
profile3

Author:
pablitodgb

1 week ago

16

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components