Getting started

Components

Navigation

Forms

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

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

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

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

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