Default Rating
Tailwind CSS Rating example with maximum number value.
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
Non-decimal
Tailwind CSS Rating example with whole decimal value.
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
Decimal
Tailwind CSS Rating example with whole decimal value.
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
Input
Use Tailwind CSS Rating as an input for form submission, allowing users to easily provide feedback through selectable rating values.
<div class="rating">
<!--begin::Reset rating-->
<label class="rating-label btn btn-sm btn-light mr-2" for="rating_1">
Reset
</label>
<input class="rating-input" id="rating_1" name="rating2" type="radio" value="0"/>
<!--end::Reset rating-->
<!--begin::Star 1-->
<label class="rating-label checked" for="rating_1_1">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</label>
<input checked="" class="rating-input" id="rating_1_1" name="rating2" type="radio" value="1"/>
<!--end::Star 1-->
<!--begin::Star 2-->
<label class="rating-label checked" for="rating_1_2">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</label>
<input checked="" class="rating-input" id="rating_1_2" name="rating2" type="radio" value="2"/>
<!--end::Star 2-->
<!--begin::Star 3-->
<label class="rating-label" for="rating_1_3">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</label>
<input class="rating-input" id="rating_1_3" name="rating2" type="radio" value="3"/>
<!--end::Star 3-->
<!--begin::Star 4-->
<label class="rating-label" for="rating_1_4">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</label>
<input class="rating-input" id="rating_1_4" name="rating2" type="radio" value="4"/>
<!--end::Star 4-->
<!--begin::Star 5-->
<label class="rating-label" for="rating_1_5">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</label>
<input class="rating-input" id="rating_1_5" name="rating2" type="radio" value="5"/>
<!--end::Star 5-->
</div>
Colors
Use the custom Tailwind CSS Color
classes to customize the Tailwind CSS Rating component.
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-primary text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-primary text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-primary text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-primary text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-primary text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-success text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-success text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-success text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-success text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-success text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-info text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-info text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-info text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-info text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-info text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-warning text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-danger text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-danger text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-danger text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-danger text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-danger text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-dark text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-dark text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-dark text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label indeterminate">
<i class="rating-on ki-solid ki-star leading-none text-dark text-base" style="width: 50.0%">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-dark text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
Sizes
Use the custom Tailwind Font Size
classes to customize the Tailwind CSS Rating icons size.
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-base">
</i>
<i class="rating-off ki-outline ki-star leading-none text-base">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-lg">
</i>
<i class="rating-off ki-outline ki-star leading-none text-lg">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-lg">
</i>
<i class="rating-off ki-outline ki-star leading-none text-lg">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-lg">
</i>
<i class="rating-off ki-outline ki-star leading-none text-lg">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-lg">
</i>
<i class="rating-off ki-outline ki-star leading-none text-lg">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-lg">
</i>
<i class="rating-off ki-outline ki-star leading-none text-lg">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-xl">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-xl">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-2xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-2xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-2xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-2xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-2xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-2xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-2xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-2xl">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-2xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-2xl">
</i>
</div>
</div>
<div class="rating">
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-3xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-3xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-3xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-3xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-3xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-3xl">
</i>
</div>
<div class="rating-label checked">
<i class="rating-on ki-solid ki-star leading-none text-3xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-3xl">
</i>
</div>
<div class="rating-label">
<i class="rating-on ki-solid ki-star leading-none text-3xl">
</i>
<i class="rating-off ki-outline ki-star leading-none text-3xl">
</i>
</div>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Rating component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/rating.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Rating component. |
