JSFiddle - React, Tailwind, and code Playground

by Rochefort

HTML

<div id="productsection" class="clearfix">
                        <div class="productbox one"><h2>Mutfak Bataryaları</h2></div>
                        <div class="productbox two"><h2>Banyo</h2></div>
                        <!-- <div class="productbox three"><h2>Banyo Bataryaları</h2></div> -->
                        <div class="productbox four"><h2>Duş</h2></div>
                        <!-- <div class="productbox five"><h2>Endüstriyel Ürünler</h2></div> -->
                        <div class="productbox six"><h2>Isı</h2></div>
                            <div id="productDetail" class="prodetails clearfix"><!-- productDetail -->
                                <div class="pdbox one">
                                    <ul>
                                        <li class="first"><a href="#"><span>Mutfak Bataryaları</span></a></li>
                                        <li><a href="#"><span>Evyeler</span></a></li>
                                        <li class="last"><a href="#"><span>Aspiratörler</span></a></li>
                                    </ul>
                                </div>
                                <div class="pdbox two">
                                    <ul>
                                        <li class="first"><a href="#"><span>Banyo Bataryaları</span></a></li>
                                        <li><a href="#"><span>Lavabo Bataryaları</span></a></li>
                                        <li><a href="#"><span>Rezervuarlar</span></a></li>
                                        <li><a href="#"><span>Klozet Kapakları</span></a></li>
                                        <li><a href="#"><span>Musluklar</span></a></li>
                                        <li><a href="#"><span>Sifonlar</span></a></li>
                                        <li class="last"><a href="#"><span>Banyo Aksesuarları</span></a></li>
                                    </ul>
                                </div>
<!--                 ...

CSS

@font-face {
    font-family: 'helvanltpro45lightregular';
	src: url('fonts/helvanlt.eot');
	src: url('fonts/helvanlt.eot?#iefix') format('embedded-opentype'), url('fonts/helvanlt.woff') format('woff'), url('fonts/helvanlt.ttf') format('truetype'), url('fonts/helvanlt.svg#helvanltpro45lightregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'helvanltpro55romanregular';
	src: url('fonts/helvanltroman.eot');
	src: url('fonts/helvanltroman.eot?#iefix') format('embedded-opentype'), url('fonts/helvanltroman.woff') format('woff'), url('fonts/helvanltroman.ttf') format('truetype'), url('fonts/helvanltroman.svg#helvanltpro55romanregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'helveticaneuelt_pro_65_mdRg';
	src: url('fonts/helvanltpro65md.eot');
	src: url('fonts/helvanltpro65md.eot?#iefix') format('embedded-opentype'), url('fonts/helvanltpro65md.woff') format('woff'), url('fonts/helvanltpro65md.ttf') format('truetype'), url('fonts/helvanltpro65md.svg#helveticaneuelt_pro_65_mdRg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'helvaneultpro25ultltregular';
    src: url('fonts/helvaneultproultlt.eot');
    src: url('fonts/helvaneultproultlt.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvaneultproultlt.woff') format('woff'),
         url('fonts/helvaneultproultlt.ttf') format('truetype'),
         url('fonts/helvaneultproultlt.svg#helvaneultpro25ultltregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helvaneultltitalic';
    src: url('fonts/helvaneultlt.eot');
    src: url('fonts/helvaneultlt.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvaneultlt.woff') format('woff'),
         url('fonts/helvaneultlt.ttf') format('truetype'),
         url('fonts/helvaneultlt.svg#helvaneultltitalic') format('svg');
    font-weight: normal;
   ...