Home
Maxim
Internet Connection Check

Internet Connection Check

A sleek and responsive Internet connection status checker built with Tailwind CSS and Alpine.js. This component provides real-time feedback about the user's internet connection status.

This tailwind example is contributed by Maxim, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Banner

Author Maxim

Fork Fullscreen

<div x-data="internetConnection()" x-show="!isOnline" x-transition.duration.300ms
    class="fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded-lg shadow-lg flex items-center space-x-2 z-50">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>No Internet Connection</span>
</div>

<div x-data="internetConnection()" x-show="!isOnline" x-transition.duration.300ms
    class="fixed top-0 left-0 right-0 bg-yellow-500 text-black p-3 text-center shadow-md z-50">
    <div class="container mx-auto flex justify-center items-center space-x-2">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
        <span>You are currently offline</span>
    </div>
</div>

<div class="container mx-auto p-4 mt-8">
    <div class="bg-white rounded border border-stone-200 p-6">
        <h2 class="text-xl font-semibold mb-4">How to test?</h2>
        <ul class="list-disc list-inside space-y-2">
            <li>Turn off internet on your device</li>
            <li>Use Chrome DevTools → Network → Offline</li>
            <li>Use Chrome DevTools → Network → Throttling to simulate slow connection</li>
        </ul>
    </div>
</div>

Related Examples

Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

11 months ago

1.3k
Thankyou Card

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

1 year ago

4.7k
Banner with Form

Author:
Aitrik Saha

5 months ago

712
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

1 year ago

7.9k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

198
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

1 month ago

186
images

Author:
Maxim

1 year ago

2.9k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

168
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.6k
cards
cards slices

Author:
Anonymous

1 year ago

6.2k
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components