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. |
