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

496

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

Gradient card

Author:
TailwindFlex

2 years ago

9.2k
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.5k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

3 months ago

185
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

1.5k
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

2.2k
Cards
the best tailwind cards with responsive

Author:
irahoza daniel

5 months ago

658
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

12.4k
Card with full width image
centered content

Author:
Mr Robot

2 years ago

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

Author:
farid

10 months ago

1.2k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

6 months ago

645
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

2 months ago

383
Responsive Projects Section

Author:
ariaw

6 months ago

587

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components