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

1.3k

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

Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

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

Author:
Diego Chavez

2 years ago

8.5k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

2k
Portfolio

Author:
Aitrik Saha

10 months ago

942
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.5k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

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

1 year ago

3.7k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.3k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

6 months ago

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

Author:
Pixel Perfect

1 year ago

1.6k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

695
Hero

Author:
ORGIN_DREAMS

6 months ago

900
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components