JSFiddle - React, Tailwind, and code Playground

by jamna

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0"/>
</head>

<body>
<!--header starts-->
<div  id="header">
        <div id="buttons"> <a href="#" class="button-sets">Sets</a> <a href="#" class="button-product">Products</a></div>
        <h1>Chemises and Panties</h1>
        <div id="logo"><a href="#"><img src="images/logo.png" width="178" height="31" alt="Filloboutique logo" /> </a></div>
</div>
<!--header Ends--> 
<!--wrapper starts-->
<div id="wrapper">
        <div id="select-product">
                <select class="productname">
                        <option value="Alle mærke">Alle mærker</option>
                        <option value="Acer">Acer</option>
                        <option value="Apple">Apple</option>
                        <option value="Asus">Asus</option>
                        <option value="Compaq">Compaq</option>
                        <option value="HP">HP</option>
                        <option value="Packard Bell">Packard Bell</option>
                </select>
                <select class="productsize">
                        <option value="">13"</option>
                        <option value="">14"</option>
                        <option value="">15"</option>
                        <option value="">16"</option>
                        <option value="">17"</option>
                        <option value="">18"</option>
                        <option value="">19" </option>
                </select>
                <select  class="productprice">
                        <option value="">5.000 - 10.000</option>
                        <option value="">10.000 - 15.000</option>
                        <option value="">15.000 - 20.000</option>
                        <option value="">20.000 - 25.000</option>
                        <option value="">25.000 - 30.000</option>
                        <option value="">30.000 -...

CSS

@charset "utf-8";

/*---------------------------------------------------------------------*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }

body { line-height: 1; }

ol,
ul { list-style: none; }

blockquote,
q { quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/*----------------------------------------------------*/
/* CSS reset ends here*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/* styling for body
/*----------------------------------------------------*/
body { color:#2a2a2a; font-family:"Helvetica Neue", Helvetica, sans-serif; }

/*----------------------------------------------------*/
/* styling for header 
/*----------------------------------------------------*/
#header { background-image: url("../images/header_bg.jpg"); background-repeat: repeat-x; height: 34px; padding-bottom: 0; padding-top: 10px; text-align: center; }

#buttons { float:left; margin-left: 8px; }

#buttons a { display: block; font-size: 13px; font-weight: bold; height: 30px; text-decoration: none; width: 115px; text-shadow: 0 1px 1px #FFFFFF; color:#2a2a2a; text-align: left; padding-top: 7px; padding-bottom: 7px; float:...