-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Rating
Default Rating
You can add rating using.rating & .rating-star class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-1" checked="">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-1">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-1">
</div>
</div>
Rating
You can set differnt style rating usingrating & rating-start-2 class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-2">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-2" checked="">
<input class="rating-star-2 bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-2">
</div>
</div>
Rating Colors
You can set different color rating using bg-* class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-3" checked="">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-3">
<input class="rating-star-2 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-3">
</div>
</div>
Heart Shape Rating
You can use heart shape rating using .rating & .rating-heart class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-4" checked="">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-4">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-4">
</div>
</div>
With Diffrent Colors
You can use heart shape rating using .rating & .rating-heart class.
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-heart bg-danger peer peer-checked:bg-gray-light" type="radio" name="rating-5">
<input class="rating-heart bg-secondary peer peer-checked:bg-gray-light" type="radio" name="rating-5">
<input class="rating-heart bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-5">
<input class="rating-heart bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-5" checked="">
<input class="rating-heart bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-5">
</div>
</div>
Rating With Text
You can add texts with rating.
4 Out of 5
<div class="flex flex-wrap gap-2">
<div class="rating">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-6">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-6" checked="">
<input class="rating-star bg-warning peer peer-checked:bg-gray-light" type="radio" name="rating-6">
</div>
</div>
Rating Default Sizes
You can set differnt style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-7">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-7" checked="">
<input class="rating-star-2 bg-success peer peer-checked:bg-gray-light" type="radio" name="rating-7">
</div>
</div>
Rating Medium Sizes
You can set differnt style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-8">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-8" checked="">
<input class="rating-star-2 w-7 h-7 bg-primary peer peer-checked:bg-gray-light" type="radio" name="rating-8">
</div>
</div>
Large Rating Sizes
You can set differnt style with different size rating usingrating & rating-start-2 class.
<div class="flex flex-col gap-2">
<div class="rating">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-9">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-9" checked="">
<input class="rating-star-2 w-9 h-9 bg-info peer peer-checked:bg-gray-light" type="radio" name="rating-9">
</div>
</div>