Game Live Score

A live score game layout design perfect for your live scoring application

This tailwind example is contributed by Diavox Jerome Soriano, on 05-Feb-2025. Component is made with Tailwind v3.4. similar terms for this example are Toast, Snackbar

Card Notification

Author Diavox Jerome Soriano

Tailwind v3.4 1.5k 3

Fork Fullscreen

<div class="bg-gray-900 text-white w-full max-w-md mx-auto p-4 rounded-lg text-center mt-4">
    <div class="text-gray-400 text-sm uppercase">FT</div>
    <div class="flex items-center justify-center space-x-4 mt-2">
        <div class="flex flex-col items-center">
            <img src="https://placeit-img-1-p.cdn.aws.placeit.net/uploads/stage/stage_image/54875/optimized_large_thumb_stage.jpg" alt="Charlotte Hornets" class="h-12 w-12 border rounded-lg border-gray-600">
            <span class="text-sm mt-1">Cyber Militia</span>
        </div>
        <div class="text-2xl font-bold">125 - 118</div>
        <div class="flex flex-col items-center">
            <img src="https://placeit-img-1-p.cdn.aws.placeit.net/uploads/stage/stage_image/61995/optimized_large_thumb_stage.jpg" alt="Chicago Bulls" class="h-12 w-12 border rounded-lg border-gray-600">
            <span class="text-sm mt-1">Game Player</span>
        </div>
    </div>
    <div class="text-gray-400 text-sm mt-2">51-60</div>
</div>

Related Examples

Subcribe Card - Alert - Notification

ABDO-SY

1 year ago

1.2k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

776
Landing page

Maxim

1 year ago

2.8k
carte visa black

Omer fils ELENGA

5 months ago

269
card

pablitodgb

1 year ago

1.1k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
carde avec effet apple
carde avec effet apple

Omer fils ELENGA

5 months ago

765
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

250
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

2 weeks ago

26
Responsive cards with hover

Robert Chunga

2 years ago

3.5k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k