A thermometer component for Laravel Blade using TailwindCSS.

thermometer.blade.php

@props([
    'engagementRate' => 5, // 0 - 10
    'size' => 'md', // sm, md, lg
])

<div class="w-full -mt-3">
    <div class="flex w-full">
        <div class="flex flex-col items-center -ml-5"
            style="margin-left: {{ $engagementRate >= 10 ? $engagementRate * 9.6 : $engagementRate * 9 }}%;">
            <div class="flex items-center justify-center text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-full shadow-sm bg-opacity-90
            @if($size === 'md') w-7 h-7 @endif
            @if($size === 'sm') w-6 h-6 @endif
            @if($size === 'lg') w-8 h-8 @endif">{{ $engagementRate }}</div>
        </div>
    </div>
    <div class="w-full rounded-full bg-gradient-to-r to-green-400 via-yellow-400 from-red-500
        @if($size === 'lg') h-3 -mt-5 @else h-2 -mt-4 @endif"></div>
</div>

Usage:
<x-thermometer :engagementRate="$value" size="lg" />