Published on

6 Critical Skills To Create A Voice Search With Tailwind CSS Remarkably Well

Tags
Voice Search

Voice search is becoming more and more popular nowadays. It is a convenient way for users to interact with websites or applications. In order to provide a better user experience, creating a voice search UI component is essential. In this article, we will introduce how to create a voice search with Tailwind CSS, a popular utility-first CSS framework.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help developers create responsive and customizable UI components quickly. It is different from other CSS frameworks like Bootstrap or Foundation because it does not come with pre-designed UI components. Instead, it provides a set of low-level utility classes that can be combined to create custom UI components.

The description of Voice Search UI component

A voice search UI component is a user interface element that allows users to perform a search by speaking instead of typing. It usually consists of a microphone icon and a text input field. When the user clicks on the microphone icon, the browser will prompt the user to allow access to the microphone. After the user grants permission, the user can speak the search query, and the search results will be displayed on the page.

Why use Tailwind CSS to create a Voice Search UI component?

Tailwind CSS is an excellent choice for creating a voice search UI component because it allows developers to create custom UI components quickly and easily. With Tailwind CSS, developers can use pre-defined utility classes to style the UI component without writing any custom CSS. This saves a lot of time and effort, especially for developers who are not familiar with CSS.

The preview of Voice Search UI component

To create a voice search UI component with Tailwind CSS, we need to define the HTML structure and apply the appropriate CSS classes. Here is a preview of what the voice search UI component will look like:

<div class="flex items-center border border-gray-300 rounded-lg px-3 py-2">
  <button class="text-gray-500 focus:outline-none">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
      <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 16a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M15.071 9.929a5 5 0 11-7.072-7.072 5 5 0 017.072 7.072zM16.485 8.515a6 6 0 10-8.485 8.485 6 6 0 008.485-8.485z" clip-rule="evenodd"/>
    </svg>
  </button>
  <input type="text" class="w-full ml-2 bg-transparent focus:outline-none" placeholder="Search by voice...">
</div>

Free download of the Voice Search's source code

The source code of Voice Search UI component

To create the voice search UI component, we need to define the HTML structure and apply the appropriate CSS classes. Here is an example of how to create a voice search UI component with Tailwind CSS:

<div class="flex items-center border border-gray-300 rounded-lg px-3 py-2">
  <button class="text-gray-500 focus:outline-none">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
      <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 16a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M15.071 9.929a5 5 0 11-7.072-7.072 5 5 0 017.072 7.072zM16.485 8.515a6 6 0 10-8.485 8.485 6 6 0 008.485-8.485z" clip-rule="evenodd"/>
    </svg>
  </button>
  <input type="text" class="w-full ml-2 bg-transparent focus:outline-none" placeholder="Search by voice...">
</div>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />

<!-- This is an example component -->
<div class="max-w-2xl mx-auto">

	<form class="flex items-center">   
        <label for="voice-search" class="sr-only">Search</label>
        <div class="relative w-full">
            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="text" id="voice-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search Mockups, Logos, Design Templates..." required>
            <button type="button" class="flex absolute inset-y-0 right-0 items-center pr-3">
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path></svg>
            </button>
        </div>
        <button type="submit" class="inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg class="mr-2 -ml-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search</button>
    </form>

	<p class="mt-5">This search bar component is part of a larger, open-source library of Tailwind CSS components. Learn
		more
		by going to the official <a class="text-blue-600 hover:underline"
			href="https://flowbite.com/docs/getting-started/introduction/" target="_blank">Flowbite Documentation</a>.
	</p>
    <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
</div>

How to create a Voice Search with Tailwind CSS?

To create a voice search UI component with Tailwind CSS, we need to follow these steps:

Step 1: Define the HTML structure

The first step is to define the HTML structure of the voice search UI component. We need to create a container element that contains a button and a text input field. Here is the HTML code:

<div class="flex items-center border border-gray-300 rounded-lg px-3 py-2">
  <button class="text-gray-500 focus:outline-none">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
      <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 16a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M15.071 9.929a5 5 0 11-7.072-7.072 5 5 0 017.072 7.072zM16.485 8.515a6 6 0 10-8.485 8.485 6 6 0 008.485-8.485z" clip-rule="evenodd"/>
    </svg>
  </button>
  <input type="text" class="w-full ml-2 bg-transparent focus:outline-none" placeholder="Search by voice...">
</div>

Step 2: Apply Tailwind CSS classes

The next step is to apply the appropriate Tailwind CSS classes to the HTML elements. We can use the flex class to make the container element a flex container. We can also use the items-center class to center the child elements vertically. Here is the updated HTML code:

<div class="flex items-center border border-gray-300 rounded-lg px-3 py-2">
  <button class="text-gray-500 focus:outline-none">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
      <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M10 16a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
      <path fill-rule="evenodd" d="M15.071 9.929a5 5 0 11-7.072-7.072 5 5 0 017.072 7.072zM16.485 8.515a6 6 0 10-8.485 8.485 6 6 0 008.485-8.485z" clip-rule="evenodd"/>
    </svg>
  </button>
  <input type="text" class="w-full ml-2 bg-transparent focus:outline-none" placeholder="Search by voice...">
</div>

Step 3: Add interactivity with JavaScript

The final step is to add interactivity to the voice search UI component with JavaScript. We need to add an event listener to the button element to listen for the click event. When the button is clicked, we need to prompt the user to allow access to the microphone. After the user grants permission, we can use the Web Speech API to recognize the user's speech and perform a search. Here is the JavaScript code:

const button = document.querySelector('button');
const input = document.querySelector('input');

button.addEventListener('click', async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recognition = new window.webkitSpeechRecognition();
  recognition.lang = 'en-US';
  recognition.start();
  recognition.onresult = (event) => {
    const query = event.results[0][0].transcript;
    input.value = query;
    // Perform search with query
  };
});

Conclusion

Creating a voice search UI component with Tailwind CSS is easy and straightforward. With the help of Tailwind CSS, we can create custom UI components quickly and easily without writing any custom CSS. By adding interactivity with JavaScript, we can provide a better user experience for our users. With these critical skills, we can create a voice search UI component that is both functional and beautiful.