Aiblux - Admin & Dashboard Template

Basic Rating

Don’t forget to rate us:

                            
                                <div class="flex justify-between items-center">
                                    <p class="shrink-0 font-medium text-gray-500 dark:text-dark-text">Don’t forget to rate us:</p>
                                    <!-- Rating -->
                                    <div class="flex flex-row-reverse justify-end items-center">
                                        <input type="radio" class="peer/rate rate-input" name="readonly_1" value="5">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_1" value="4">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_1" value="3" checked>
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_1" value="2">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_1" value="1">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                    </div>
                                    <!-- Rating -->
                                </div>

Outline Rating

Don’t forget to rate us:

                            
                                <div class="flex justify-between items-center">
                                    <p class="shrink-0 font-medium text-gray-500 dark:text-dark-text">Don’t forget to rate us:</p>
                                    <!-- Rating -->
                                    <div class="flex flex-row-reverse justify-end items-center">
                                        <input type="radio" class="peer/rate rate-input" name="readonly_2" value="5">
                                        <label class="rate-label before:content-['\f18b'] peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_2" value="4">
                                        <label class="rate-label before:content-['\f18b'] peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_2" value="3" checked>
                                        <label class="rate-label before:content-['\f18b'] peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_2" value="2">
                                        <label class="rate-label before:content-['\f18b'] peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_2" value="1">
                                        <label class="rate-label before:content-['\f18b'] peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                    </div>
                                    <!-- Rating -->
                                </div>

Profile Rating

Don’t forget to rate us:

                            
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center gap-3">
                                        <img src="assets/images/user/profile-img.png" alt="user" class="size-9 rounded-full">
                                        <p class="shrink-0 font-medium text-gray-500 dark:text-dark-text">Don’t forget to rate us:</p>
                                    </div>
                                    <!-- Rating -->
                                    <div class="flex flex-row-reverse justify-end items-center">
                                        <input type="radio" class="peer/rate rate-input" name="readonly_3" value="5">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_3" value="4">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_3" value="3" checked>
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_3" value="2">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                        <input type="radio" class="peer/rate rate-input" name="readonly_3" value="1">
                                        <label class="rate-label peer-checked/rate:text-[#ECBC38] peer-hover/rate:text-[#ECBC38]"></label>
                                    </div>
                                    <!-- Rating -->
                                </div>

Profile Rating Readonly

4.0/5

2,399 total ratings

5 - star

100%

4 - star

80%

3 - star

60%

2 - star

40%

1 - star

20%

                            
                                <div>
                                    <div class="flex item-center gap-3">
                                        <span class="text-[35px] font-semibold text-[#1F1F1F] dark:text-dark-text">4.0/5</span>
                                        <!-- Rating -->
                                        <div class="flex flex-row-reverse justify-end items-center">
                                            <input type="radio" class="peer/rate rate-input" name="readonly_4" value="5">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_4" value="4" checked>
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_4" value="3">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_4" value="2">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_4" value="1">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                        </div>
                                        <!-- Rating -->
                                    </div>
                                    <p class="text-sm font-medium text-gray-500 dark:text-dark-text mb-5">2,399 total ratings</p>
                                    <div class="flex items-center mt-4">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="size-6 flex-center dk-border-one rounded-md text-star-mail before:font-remix before:content-['\f186']"></div>
                                            <span class="text-sm font-medium text-gray-500 dark:text-dark-text">5 - star</span>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[100%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">100%</span>
                                    </div>
                                    <div class="flex items-center mt-4">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="size-6 flex-center dk-border-one rounded-md text-star-mail before:font-remix before:content-['\f186']"></div>
                                            <span class="text-sm font-medium text-gray-500 dark:text-dark-text">4 - star</span>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[80%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">80%</span>
                                    </div>
                                    <div class="flex items-center mt-4">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="size-6 flex-center dk-border-one rounded-md text-star-mail before:font-remix before:content-['\f186']"></div>
                                            <span class="text-sm font-medium text-gray-500 dark:text-dark-text">3 - star</span>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[60%] h-2.5 bg-[#ECBC38] rounded-full" ></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">60%</span>
                                    </div>
                                    <div class="flex items-center mt-4">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="size-6 flex-center dk-border-one rounded-md text-star-mail before:font-remix before:content-['\f186']"></div>
                                            <span class="text-sm font-medium text-gray-500 dark:text-dark-text">2 - star</span>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[40%] h-2.5 bg-[#ECBC38] rounded-full" ></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">40%</span>
                                    </div>
                                    <div class="flex items-center mt-4">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="size-6 flex-center dk-border-one rounded-md text-star-mail before:font-remix before:content-['\f186']"></div>
                                            <span class="text-sm font-medium text-gray-500 dark:text-dark-text">1 - star</span>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[20%] h-2.5 bg-[#ECBC38] rounded-full" ></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">20%</span>
                                    </div> 
                                </div>

Profile Rating

4.0/5

2,399 total ratings

0.5

100%

0.4

80%

0.3

60%

0.2

40%

0.1

20%

                            
                                <div>
                                    <div class="flex item-center gap-3">
                                        <span class="text-[35px] font-semibold text-[#1F1F1F] dark:text-dark-text">4.0/5</span>
                                        <!-- Rating -->
                                        <div class="flex flex-row-reverse justify-end items-center">
                                            <input type="radio" class="peer/rate rate-input" name="readonly_5" value="5">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_5" value="4" checked>
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_5" value="3">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_5" value="2">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                            <input type="radio" class="peer/rate rate-input" name="readonly_5" value="1">
                                            <label class="rate-label peer-checked/rate:text-[#ECBC38]"></label>
                                        </div>
                                        <!-- Rating -->
                                    </div>
                                    <p class="text-sm font-medium text-gray-500 dark:text-dark-text mb-5">2,399 total ratings</p>
                                    <div class="flex items-center mt-3">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <span class="font-semibold text-gray-500 dark:text-dark-text">0.5</span>
                                            <!-- Rating -->
                                            <div class="flex gap-1 items-center">
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                            </div>
                                            <!-- Rating -->
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[100%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">100%</span>
                                    </div>
                                    <div class="flex items-center mt-3">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">0.4</span>
                                            <!-- Rating -->
                                            <div class="flex gap-1 items-center">
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate"></span>
                                                <span class="readonly-rate no-rate"></span>
                                            </div>
                                            <!-- Rating -->
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[80%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">80%</span>
                                    </div>
                                    <div class="flex items-center mt-3">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="flex items-center gap-2 shrink-0">
                                                <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">0.3</span>
                                                <!-- Rating -->
                                                <div class="flex gap-1 items-center">
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                </div>
                                                <!-- Rating -->
                                            </div>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[60%] h-2.5 bg-[#ECBC38] rounded-full" ></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">60%</span>
                                    </div>
                                    <div class="flex items-center mt-3">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="flex items-center gap-2 shrink-0">
                                                <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">0.2</span>
                                                <!-- Rating -->
                                                <div class="flex gap-1 items-center">
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                </div>
                                                <!-- Rating -->
                                            </div>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[40%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">40%</span>
                                    </div>
                                    <div class="flex items-center mt-3">
                                        <div class="flex items-center gap-2 shrink-0">
                                            <div class="flex items-center gap-2 shrink-0">
                                                <span class="text-sm font-semibold text-gray-500 dark:text-dark-text">0.3</span>
                                                <!-- Rating -->
                                                <div class="flex gap-1 items-center">
                                                    <span class="readonly-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                    <span class="readonly-rate no-rate"></span>
                                                </div>
                                                <!-- Rating -->
                                            </div>
                                        </div>
                                        <div class="w-full h-2.5 mx-4 bg-gray-200 dark:bg-progress-bar-bg-dark rounded-full">
                                            <div class="w-[20%] h-2.5 bg-[#ECBC38] rounded-full"></div>
                                        </div>
                                        <span class="w-6 text-sm font-medium text-gray-500 dark:text-dark-text">20%</span>
                                    </div>
                                </div>

English

Spanish

French

Italian

Arabic

Apps

Components

Help

Personalize Settings

Theme Mode

Rating Component

Basic Rating

Outline Rating

Profile Rating

Profile Rating Readonly

Profile Rating