Home
Diavox Jerome Soriano
Game Live Score

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 CSS v3. similar terms for this example are Toast, Snackbar

Card Notification

Author Diavox Jerome Soriano

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

Author:
ABDO-SY

11 months ago

934
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.

Author:
Ijila Itunu

4 months ago

555
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

9 months ago

944
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

8 months ago

1.2k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.6k
Sign up form

Author:
Rajesh Maheshwari

11 months ago

976
Total balance overview

Author:
Raul antonio de la cruz hernandez

2 months ago

347
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

7 months ago

822
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.6k
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

3 years ago

13.1k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

3 years ago

10.9k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components