JSFiddle - React, Tailwind, and code Playground

by Gratian Alinei

HTML

<div class="search-container">
    <input type="text" class="search-input" placeholder="Search...">
</div>

CSS

.search-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Adjust based on your design */
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 10px; /* Adjust padding to make room for the icon */
    font-size: 16px;
    box-sizing: border-box;
}

.search-container::before {
    content: "\1F50D"; /* Unicode for the magnifying glass icon */
    font-size: 18px; /* Adjust size of the icon */
    position: absolute;
    right: 10px; /* Adjust position of the icon */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa; /* Adjust color of the icon */
    pointer-events: none; /* Prevent interaction with the icon */
}