JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<nav class="navbar">
    	<ul class="left">
    		<li><a href="#">nonono</a></li>
    		<li><a href="#">nonono</a></li>
    		<li><a href="#">nonono</a></li>
    		<li><a href="#">nonono</a></li>
    		<li><a href="#">nonono</a></li>
    	</ul>
    	
   		<ul class="right">
   			<li><a th:href="@{/cart}"><img src="#"/></a></li>
   			<li><a th:href="@{/order}"><img src="#"/></a></li>
   			
   			<li sec:authorize="isAuthenticated()"><span sec:authentication="name"></span></li>
   			<li sec:authorize="isAuthenticated()"><a th:href="@{/logout}"><img src="#"/></a></li>
   			
   			<li sec:authorize="isAnonymous()"><a th:href="@{/signin}" th:utext="#{signin}"></a></li>
   			<li sec:authorize="isAnonymous()"><a th:href="@{/signup}" th:utext="#{signup}"></a></li>
   		</ul>
    </nav>
    
    <section class="main">
    	<nav class="menu">
    		<ul>
    			<li><img th:src="@{/img/logo.png}" width="120" height="240"/></li>
    			<li><a href="#">nonono</a></li>
    			<li><a href="#">nonono</a></li>
    			<li><a href="#">nonono</a></li>
    			<li><a href="#">nonono</a></li>
    			<li><a href="#">nonono</a></li>
    		</ul>
    	</nav>
    	
    	<div class="row">
    		<div class="container">
    			<h1> nonono </h1>
    		</div>
    		
    		<div class="column">
    			<h2>nonono</h2>
    			<img src="#" width="180" height="150"/>
    			<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper diam tellus, in porta est porta ut. Nullam dapibus justo nec nullam.</h3>
    		</div>
    		<div class="column">
    			<h2>nonono</h2>
    			<img src="#" width="180" height="150"/>
    			<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper diam tellus, in porta est porta ut. Nullam dapibus justo nec nullam.</h3>
    		</div>
    		<div class="column">
    			<h2>nonono</h2>
    			<img src="#" width="180" height="150"/>
    			<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper diam tellus, in porta...

CSS

@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Anton|Bahiana|Bangers|Barrio|Montserrat|Ultra|Volkhov');

body {
	margin: 0;
	padding: 0;
}

.navbar {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	height: auto;
	background-color: black;
	color: white;
	font-family: 'Volkhov', serif;
	font-size: 24px;
}

.navbar ul {
	list-style-type: none;
	align-items: baseline;
	flex-basis: auto;
	flex-direction: row;
	column-gap: 0px;
	display: inline;
}

.navbar ul li {
	text-align: center;
	display: inline;
}

.navbar ul li a {
	text-decoration: none;
	color: white;
}

.navbar ul li a:hover {
	background-color: lightsteelblue;
}

.main {
	display: inline;
  align-items: flex-start;
}

.menu {
	background-color: silver;
	font-family: 'Ultra', serif;
	font-size: 24px;
	width: auto;
}

.menu ul {
	list-style-type: none;
}

.menu ul li {
	text-align: center;
	width: 120px;
}

.menu ul li a {
	text-decoration: none;
	color: white;
}

.menu ul li a:hover {
	background-color: lightsteelblue;
}

.row {
	display: inline;
}

.row:odd {
	
}

.row:even{
	
}

.container {
	
}

h1 {
	border: 2px solid;
}

.column {
	display: inline;
}

.row:odd .column:odd {
	background-color: gainsboro;
}

.row:odd .column:even {
	background-color: ghostwhite;
}

.row:even .column:odd {
	background-color: ghostwhite;
}

.row:even .column:odd {
	background-color: gainsboro;
}

.column h2 {
	font-family: 'Ultra', serif;
	font-size: 16px;
	width: 180px;
}

.column img {
	
}

.column h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	width: 180px;
}