Home
Rushikesh Latpate
email card

email card

This tailwind example is contributed by Rushikesh Latpate, on 12-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Rushikesh Latpate

252

Fork Fullscreen

<div class="mx-auto max-w-lg mt-40">
    <div class="bg-gray-30 rounded-lg overflow-hidden shadow-lg">
        <div class="px-6 py-4">
            <div class="flex justify-between items-center">

</div>
            <div class="mt-4">
                <div class="font-bold text-gray-800 text-xl">support@sugam24.in</div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-sm text-gray-600"><b>Password:</b> Xpqi621mlid</div>
                    <div class="text-lg text-red-600 text-gray-600">
                     <a href="#"> <i class="bi bi-trash"></i> </a>  &nbsp;&nbsp;&nbsp;
                     <a href="#"> <i class="bi bi-pen text-lg text-gray-900 text-gray-600"></i> </a>  &nbsp;&nbsp;&nbsp;
                     <a href="#"> <i class="bi bi-share text-lg text-teal-600 text-gray-600"></i> </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-gray-100 px-6 py-4">
            <div class="text-sm text-gray-600"><b>Server Hostname:</b> mailserver.sugam24.in</div>
            <div class="text-sm text-gray-600"><b>IMAP Port:</b> 875</div>
            <div class="text-sm text-gray-600"><b>SMTP Port:</b> 458</div>
            <div class="text-sm text-gray-600"><b>Authentication:</b> Encrypted password</div>
            <div class="text-sm text-gray-600"><b>Connection type:</b> StartTLS</div>
            <br>
            <div class="">
                  <div class="relative">
                      
                      <div class="flex justify-between mb-1">
                          <span class="text-gray-700 text-sm"><b>Storage:</b> 20MB/200MB</span>
                           <span class="text-gray-700 font-semibold">85%</span>
                      </div>
                      
                      <div class="h-1 rounded-full overflow-hidden bg-gray-300">
                          <div class="h-full rounded-full bg-orange-600" style="width: 85%;"></div>
                      </div>
                  </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Horizontal card with image

Author:
Amit Pachange

2 years ago

14.3k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

6 months ago

902
Blog Card

Author:
Md. Tofayel islam

10 months ago

1.4k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.8k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

5 months ago

828
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

604
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

11 months ago

2.4k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

3 months ago

551
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

6 months ago

663
card
card section. find it makecomponents.com

Author:
makecomponents

1 year ago

1.8k
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

2.3k
Signup page- Paper / Hand-drawn UI

Author:
Akram Khan

2 months ago

419

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components