Home
Rushikesh Latpate
Products information

Products information

Products information services and products display

This tailwind example is contributed by Rushikesh Latpate, on 28-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Product

Author Rushikesh Latpate

952

2

Fork Fullscreen

<main class="flex-grow p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div class="bg-gray-00 p-4">
      
      <article class="max-w-sm w-full bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-700">
        <div>
          <img class="object-cover h-64 w-full" src="https://sugam24.in/web/img/encript.jpg" alt="Converse sneakers" />
        </div>

<div class="flex flex-col gap-1 mt-4 px-4">
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-50">Encrypted communication</h2>
          <span class="font-normal text-gray-600 dark:text-gray-300">It prohibits anyone from seeing the contents of the message except for you and the intended recipient. becoming crucial in today’s technologically-connected world.</span>
        </div>

<div class="mt-4 p-4 border-t border-gray-200 dark:border-gray-500">
          <button class="w-full flex justify-between items-center font-bold cursor-pointer hover:underline text-gray-800 dark:text-gray-50">
                <span class="text-base">...</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                </svg>
              </button>
        </div>
      </article>
    </div>
    <div class="bg-gray-00 p-4">
      
      <article class="max-w-sm w-full bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-700">
        <div>
          <img class="object-cover h-64 w-full" src="https://sugam24.in/web/img/encript.jpg" alt="Converse sneakers" />
        </div>

<div class="flex flex-col gap-1 mt-4 px-4">
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-50">Encrypted communication</h2>
          <span class="font-normal text-gray-600 dark:text-gray-300">It prohibits anyone from seeing the contents of the message except for you and the intended recipient. becoming crucial in today’s technologically-connected world.</span>
        </div>

<div class="mt-4 p-4 border-t border-gray-200 dark:border-gray-500">
          <button class="w-full flex justify-between items-center font-bold cursor-pointer hover:underline text-gray-800 dark:text-gray-50">
                <span class="text-base">...</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                </svg>
              </button>
        </div>
      </article>
    </div>
    <div class="bg-gray-00 p-4">
      
      <article class="max-w-sm w-full bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-700">
        <div>
          <img class="object-cover h-64 w-full" src="https://sugam24.in/web/img/encript.jpg" alt="Converse sneakers" />
        </div>

<div class="flex flex-col gap-1 mt-4 px-4">
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-50">Encrypted communication</h2>
          <span class="font-normal text-gray-600 dark:text-gray-300">It prohibits anyone from seeing the contents of the message except for you and the intended recipient. becoming crucial in today’s technologically-connected world.</span>
        </div>

<div class="mt-4 p-4 border-t border-gray-200 dark:border-gray-500">
          <button class="w-full flex justify-between items-center font-bold cursor-pointer hover:underline text-gray-800 dark:text-gray-50">
                <span class="text-base">...</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/>
                </svg>
              </button>
        </div>
      </article>
    </div>

</div>
</main>

Related Examples

Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.8k
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

9 months ago

781
Tailwind product gallery

Author:
JaxStone

2 years ago

27k
pricing
pricing

Author:
Omer fils ELENGA

5 months ago

509
Product Details Card

Author:
ABDO-SY

10 months ago

2k
Feature Card

Author:
Md. Tofayel islam

1 year ago

1.7k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

5 months ago

563
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

2 months ago

277
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

724
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.5k
Product card

Author:
Oliver Hansen

2 years ago

13.8k
Product Card

Author:
Maxim

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12