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