JSFiddle - React, Tailwind, and code Playground

by kanesca

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mirror Fashion</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
	 <header class="container">
	 	<h1><img src="img/logo.png" alt="logo da Mirror Fashion"></h1>
	 		<p class="sacola">
	 			Nenhum item na sacola de compras
	 		</p>	 		
	 			<nav class="menu-opcoes">
	 			<ul>
	 				<li><a href="#">Sua Conta</a></li>
	 				<li><a href="#">Lista de Desejos</a></li>
	 				<li><a href="#">Cartão Fidelidade</a></li>
	 				<li><a href="sobre.html">Sobre</a></li>
	 				<li><a href="#">Ajuda</a></li>
	 			</ul>
	 		</nav>	 		
	 </header>
	 	<div class="container destaque">
	 		<selecion class="busca">
	 				<h2>busca</h2>
	 	<form>
	 			<input type="search">
	 				<button>Buscar</button>
	 	</form>
	 </selecion>
	 	<section class="menu-departamentos">
	 			<h2>Departamentos</h2>
	 				<nav>
	 					<ul>
	 						<li><a href="#">Blusas e Camisas</a></li>
	 						<li><a href="#">Calças</a></li>
	 						<li><a href="#">Saias</a></li>
	 						<li><a href="#">Vestidos</a></li>
	 						<li><a href="#">Sapatos</a></li>
	 						<li><a href="#">Bolsas e Carteiras</a></li>
	 						<li><a href="#">Acessórios</a></li>
	 					</ul>
	 				</nav>
	 			</section>
	 				<selection class="banner-destaque">
	 					<figure>
	 							<img src="img/destaque-home.png" alt="Promoção: Big City Night">
	 					</figure>
	 				</selection>
	 			</div>
	 				<div class="container paineis">
	 				<selection class="painel novidades">
	 					<h2>Novidades</h2>
	 					<ol>
	 						<li>	 					
	 						<a href="produto.html">
	 							<figure>
	 								<img src="img/produtos/miniatura1.png" alt="miniatura1">
	 								<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
	 								</figure>
	 							</a>
	 						</li>
	 							<li>
	 								<a href="produto.html">
	 									<figure>
	 										<img src="img/produtos/miniatura2.png" alt="miniatura2">
	 										<figcaption>Fuzz...

CSS

.sacola	{
	background-image: url(../img/sacola.png);
	background-repeat: no-repeat;
	background-position: top right;

	font-size: 14px;
	padding-right: 35px;
	text-align: right;
	width: 140px;
	padding-top: 8px;

	position: absolute;
	top: 0;
	right: 0;
}

.menu-opcoes ul {
	font-size: 15px;
}

.menu-opcoes a {
	color: #003366;
}

body	{
	color: #333333;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-serif;
}

.menu-opcoes ul li {
	display: inline;
	margin-left: 20px;
}

.container	{
	margin: 0 auto;
	width: 940px;
}

header	{
	position: relative;
}

.menu-opcoes	{
	position: absolute;
	bottom: 0;
	right: 0;
}

.busca,
.menu-departamentos	{
	background-color: #DCDCDC;
	font-weight: bold;
	text-transform: uppercase;
	margin-right: 10px;
	width: 230px;
}

.busca h2,
.busca form,
.menu-departamentos h2	{
	margin: 10px;
}

.menu-departamentos li {
	background-color: white;
	margin-bottom: 1px;
	padding: 5px 10px;
}

.menu-departamentos a {
	color: #333333;
	text-decoration: none;
}

.busca input[type=search]	{
	width: 170px;
}

.busca,.menu-departamentos	{
	float: left;
}

.menu-departamentos	{
	clear: left;
}

.destaque	{
	margin-top: 10px;
}

.menu-departamentos	{
	margin-top: 10px;
	padding-bottom: 10px;
}

.painel	{
	margin: 10px 0;
	padding: 10px;
	width: 445px;
}

.novidades	{
	float: left;
}

.mais-vendidos	{
	float: right;
}

.painel li {
	display: inline-block;
	vertical-align: top;
	width: 140px; 

	margin: 2px;
	padding-bottom: 10px;
}

.painel h2	{
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;

	margin-bottom: 10px;
}

.painel a {
	color: #333;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}

.novidades {
	background-color: #F5DCDC;
	background: linear-gradient(#DCDCF5, #F4BEBE);
}

.mais-vendidos {
	background-color: #DCDCF5;
	background: linear-gradient(#F5DCDC, #BEBEF4);
}

footer	{
	background-image: url(../img/fundo-rodape.png);
}

.social a {
	height: 32px;
	width: 32px;
	display: block;
	text-indent:...