JSFiddle - React, Tailwind, and code Playground

by John110

HTML

<div class="page-content">

			<div class="block">
				
				<form data-search-container=".search-list" data-search-in=".item-title" data-search-in=".item-text"
				class="searchbar-init">
					<div class="search-bar">
						<input type="search" placeholder="বইয়ের নাম দ্বারা অনুসন্ধান করুন"/>
						<i class="material-icons">search</i>
						<span class="input-clear-button margin-right"></span>
					</div>
				</form>
			</div>
		
    <div class="searchbar-backdrop"></div>
	
	<!-- booklist Search-->
	
		<div class="back-page margin-top margin-bottom padding  display-flex justify-content-space-between align-items-center">
			<a href="#" class="link back text-color-black">
				<i class="material-icons">arrow_back</i>
			</a>
			<a href="/blank/" class="tab-link"><i class="material-icons">search</i></a>
		</div>
		
		<div class="section padding-left padding-right mb">
			<div class="section-title display-flex justify-content-space-between align-items-center">
				<h2>বই সমূহ</h2>
				<div class="display-style">
					<a href="#" class="display-style-active" data-display="list"><i class="material-icons">view_list</i></a>
					<a href="#" data-display="grid"><i class="material-icons">view_module</i></a>
				</div>
			</div>
			<div class="section-content">
				<div class="books-list">
								
					<div class="book-list display-flex">
						<div class="book-img">
							<img src="./img/cover/belayater_duti.jpg" alt="list1" class="object-fit">
						</div>
						<div class="book-infos">
							<div class="book-title">
								<a href="/free_book_single/">বেলায়াতের দ্যুতি</a>
							</div>
							<div class="book-author">আয়াতুল্লাহ জাফর সুবহানী</div>
							<div class="book-description">
								Loomis is revered amongst artists including the great painter Norman ...
							</div>
						</div>
					</div>
					
					<div class="book-list display-flex">
						<div class="book-img">
							<img src="./img/cover/al_murajat.jpg" alt="list9"...