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.1k

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

Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

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

Author:
Emdadul Islam

1 year ago

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

Author:
ORGIN_DREAMS

3 months ago

347
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

3 months ago

775
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.6k
Banner - Hero - Splash Section

Author:
ABDO-SY

6 months ago

726
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

12k
images

Author:
Maxim

1 year ago

3k
Banner with Form

Author:
Aitrik Saha

7 months ago

1.1k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

10k
Call to Action Box

Author:
Aitrik Saha

7 months ago

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

Author:
Emdadul Islam

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components