Metronic - Tailwind CSS 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>

Tailwind CSS Rating example with whole decimal value.

Preview HTML

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

Tailwind CSS Rating example with whole decimal value.

Preview HTML

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

Use Tailwind CSS Rating as an input for form submission, allowing users to easily provide feedback through selectable rating values.

Preview HTML

Reset

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

Use the custom Tailwind CSS Color classes to customize the Tailwind CSS Rating component.

Preview HTML

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

Use the custom Tailwind Font Size classes to customize the Tailwind CSS Rating icons size.

Preview HTML

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

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.

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Rating

Default Rating

Non-decimal

Decimal

Input

Colors

Sizes

Source Code

On This Page

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Rating

​ Default Rating

​ Non-decimal

​ Decimal

​ Input

​ Colors

​ Sizes

​ Source Code

On This Page

Default Rating

Non-decimal

Decimal

Input

Colors

Sizes

Source Code