Tailwind rating

Responsive rating built with Tailwind. Rating provides insight into others' opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces)

Basic example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

  <ul class="flex justify-center">
    <li>
      <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
      <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
      <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
      <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
      <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
  </ul>

  

Filled

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

  <ul class="flex justify-center">
    <li>
        <i class="fas fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
        <i class="fas fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
        <i class="fas fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-star fa-sm text-yellow-500 mr-1"></i>
    </li>
</ul>

  

Custom icons

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

  <ul class="flex justify-center">
    <li>
        <i class="fas fa-heart fa-sm text-red-500 mr-1"></i>
    </li>
    <li>
        <i class="fas fa-heart fa-sm text-red-500 mr-1"></i>
    </li>
    <li>
        <i class="fas fa-heart fa-sm text-red-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-heart fa-sm text-red-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-heart fa-sm text-red-500 mr-1"></i>
    </li>
</ul>

  

Emoji

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

  <ul class="flex justify-center">
    <li>
        <i class="far fa-angry fa-lg text-blue-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-frown fa-lg text-blue-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-meh fa-lg text-blue-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-smile  fa-lg text-blue-500 mr-1"></i>
    </li>
    <li>
        <i class="far fa-grin-stars fa-lg text-blue-500 mr-1"></i>
    </li>
</ul>

  