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

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

Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11.6k
Coming Soon Page

Author:
Conan Hilton

2 years ago

9.7k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

2 months ago

357
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

11 months ago

2.1k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

10.4k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

6 months ago

922
Profile Card
Simple and Attractive Profile card in tailwind css

Author:
KULDEEP

2 weeks ago

70
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

1 month ago

57
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.3k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

11.6k
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

3.2k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

144

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components