Create an Engaging Voting Widget with Tailwind CSS

With the upcoming American elections, it's a great time to practice your voting skills and get ready for the polls with this JavaScript-free widget!

In this article, we will explore how to create a simple voting widget using Tailwind CSS to customize a radio button without the need for JavaScript. This widget will allow users to upvote or downvote and display the current score, enhancing user engagement on your site.

Step 1: Create the sprite

In this example, I used the GIF animation Upward Arrow icon by Icons8 as a base and customized its color. Then I transformed the GIF into a sprite. We also need a static button image.

My sprite contains 24 images that will be displayed one after the other to create the animation, just like a roll of film. You can create a sprite with more or fewer images, but you'll have to adapt the animation.

Step 2: Code Explanation

2.1 Extend Tailwind with Our Animation

First, we will extend the Tailwind CSS default configuration to incorporate our animation. The sprite will be set as a background image, and we will create a simple @keyframes rule to position the background. Then we will create the sprite animation using it.

tailwind.config = {

    theme: {

        extend: {

            keyframes: {

                sprite: {

                    from: {

                        backgroundPosition: "left"

                    },

                    to: {

                        backgroundPosition: "right"

                    }

                }

            },

            animation: {

                "vote-sprite": "sprite .8s steps(23) 1 forwards"

            }

        }

    }

}

If you use a different number of frames in your sprite, adjust the number of steps and duration of the animation accordingly.

2.2 Radio inputs

Three radio inputs represent the voting options:

1. Downvote: To vote down.




2. Blank: To cancel the vote.




3. Upvote: To vote up.

Each input is hidden using the hidden class and we will be used as peers to change the style of next elements depending on the states of the radio inputs.

<input id="down-radio" class="peer/down hidden" type="radio" name="vote" value="down">

<input id="blank-radio" class="peer/blank hidden" type="radio" name="vote" value="blank" checked="checked">

<input id="up-radio" class="peer/up hidden" type="radio" name="vote" value="up">

2.3 Labels

The labels are used to activate the radio inputs when clicked. We will have four labels used as buttons for voting actions: one label for checking downvote, one label for canceling the downvote checking blank, and the same for upvoting.

They utilize Tailwind classes for appearance and behavior management:

• The first label is displayed by default and and points to downvote. Its background is the static image.




• The second label is shown when downvote is checked and it contains the animation animation that runs each time we vote.



• 
  

  The same principle applies for upvoting.
  
  

  
  

  <!-- Downvote -->
  
  <label class="peer/down-btn aspect-square cursor-pointer w-12 peer-checked/down:invisible" for="down-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Downvote"></label>
  
  <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer left-0 opacity-0 pointer-events-none w-12 transition-opacity peer-hover/down-btn:opacity-100 peer-checked/down:animate-vote-sprite peer-checked/down:pointer-events-auto peer-checked/down:opacity-100 peer-checked/down:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932412479/c91aef3d-6588-4883-b503-2db3b6594ba0.png');" aria-label="Remove downvote"></label>
  
  
  
  <!-- Upvote -->
  
  <label class="peer/up-btn aspect-square cursor-pointer rotate-180 w-12 peer-checked/up:invisible" for="up-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Upvote"></label>
  
  <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer opacity-0 pointer-events-none right-0 w-12 transition-opacity peer-hover/up-btn:opacity-100 peer-checked/up:animate-vote-sprite peer-checked/up:pointer-events-auto peer-checked/up:opacity-100 peer-checked/up:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932423782/2e233a8b-db52-431f-9f1b-7458214ac960.png');" aria-label="Remove upvote"></label>
  
  

  
  
  

2.4 Vote Counter

The central section displays the vote score. Using transition and translate classes, we can animate score changes when a user votes. The wrapper masks other values with overflow-hidden.

<div class="group flex items-center h-8 mx-1 overflow-hidden text-2xl">

    <div class="flex flex-col font-semibold items-center transition duration-700 translate-y-0 peer-checked/up:group-[]:-translate-y-8 peer-checked/down:group-[]:translate-y-8">

        <span class="text-red-700">-1</span>

        <span>0</span>

        <span class="text-green-800">1</span>

    </div>

</div>

2.5 Wrapping in Flexbox

We wrap everything in an inline-flex container to ensure elements are well placed and aligned. We also noticed that clicking on the buttons was selecting some text on mobile devices so we recommend using select-none to remove the problem.

3. Try It Out

<div class="gap-0 h-16 inline-flex items-center relative select-none">

    <input id="down-radio" class="peer/down hidden" type="radio" name="vote" value="down">

    <input id="blank-radio" class="peer/blank hidden" type="radio" name="vote" value="blank" checked="checked">

    <input id="up-radio" class="peer/up hidden" type="radio" name="vote" value="up">



    <label class="peer/down-btn aspect-square cursor-pointer w-12 peer-checked/down:invisible" for="down-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Downvote"></label>

    <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer left-0 opacity-0 pointer-events-none w-12 transition-opacity peer-hover/down-btn:opacity-100 peer-checked/down:animate-vote-sprite peer-checked/down:pointer-events-auto peer-checked/down:opacity-100 peer-checked/down:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932412479/c91aef3d-6588-4883-b503-2db3b6594ba0.png');" aria-label="Remove downvote"></label>

    <div class="group flex items-center h-8 mx-1 overflow-hidden text-2xl">

        <div class="flex flex-col font-semibold items-center transition duration-700 translate-y-0 peer-checked/up:group-[]:-translate-y-8 peer-checked/down:group-[]:translate-y-8">

            <span class="text-red-700">-1</span>

            <span>0</span>

            <span class="text-green-800">1</span>

        </div>

    </div>

    <label class="peer/up-btn aspect-square cursor-pointer rotate-180 w-12 peer-checked/up:invisible" for="up-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Upvote"></label>

    <label class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer opacity-0 pointer-events-none right-0 w-12 transition-opacity peer-hover/up-btn:opacity-100 peer-checked/up:animate-vote-sprite peer-checked/up:pointer-events-auto peer-checked/up:opacity-100 peer-checked/up:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932423782/2e233a8b-db52-431f-9f1b-7458214ac960.png');" aria-label="Remove upvote"></label>

</div>

Conclusion

This simple voting widget, built solely with HTML and Tailwind CSS, provides a smooth user experience without requiring JavaScript. By customizing styles and integrating this code, you can easily allow users to interact with your content effectively. For more information on using Tailwind CSS, check out the official documentation.