JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<body>
	<div class="header">
		<div class="logo">
			<a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
		</div>
		<div class="links">			
			<a href="home.html">Home</a>
			<a href="products.html">Products</a>
			<a href="login.html">Login</a>
			<a href="register.html">Register</a>
			<a href="home.html">Contact</a>
			<a href="home.html">About</a>
		</div>
	</div>
	<div class="content">
                <div class="row">
		<div class="product-1 product">
			<div class="image">
					<img src="slide-4.jpg" alt="Image 1" />
			</div>
			<div class="caption">
				
			</div>
		</div>

		

		<div class="product-2 product">
			<div class="image">
					<img src="slide-5.jpg" alt="Image 2"/>
			</div>
			<div class="caption">
				
			</div>
		</div>
                </div>

		<div id="clear"></div>

                <div class="row">
		<div class="product-1 product">
			<div class="image">
					<img src="slide-6.jpg" alt="Image 3"/>
			</div>
			<div class="caption">
				
			</div>
		</div>

		<div class="product-2 product">
			<div class="image">
					<img src="slide-5.jpg" alt="Image 4"/>
			</div>
			<div class="caption">
				
			</div>
		</div>
                </div>

	</div>
</body>

CSS

body{
		height: 100vh;
		margin: 0px;
		overflow: scroll;
	}
.header{

		background-color: white;
		height:8%;
		overflow: hidden;
		font-style: "Roboto";
		font-size: 25px;
		border-bottom: 2px solid;
		border-bottom-color: #cccccc;
}
#clear{
 	clear: both;
 }
.logo{
	margin-top: 12px;
	float: left;
	left: 0px;
	padding-right: 50px;
}
#logo:hover{
	background: transparent;
}
.links{
	display: block;
	float: right;
	margin-right: 10px;
	margin-top: 10px;
}
a{
	position: relative;
	right: 0px;
	/*top: 25px;*/

	padding-left: 10px;
	padding-right: 10px;

	color:black;
	letter-spacing: 2px;
	font-weight: 200;
	text-decoration: none;
}
a:hover{
	background-color:#cccccc; 
}

.content{
	display: block;
	background-color: white;
	height: 92%;
	margin-top: 0px;

}

#clear{
	clear: both;
}

.image{
	display: block;
	width: 200px;
	height: 200px;
	border-style: dashed;
	border-color: red;
	border-width: 2px;
	overflow: hidden;
}

.product-1{
	display: block;
	position: relative;
	
	padding-left: 10%;
	padding-right: 10%;
	
	margin-top: 5%;
	
	float: left;
	left: 0px;
	width: 175px; /* sample width */
	overflow: hidden;

	border-style: solid;
	border-color: black;
	border-width: 1px;
}

.product-2{
	display: block;
	position: relative;

	padding-left: 10%;
	padding-right: 10%;

	margin-top: 5%;
	float: right;
	width: 175px; /* sample width */
	overflow: hidden;

	border-style: solid;
	border-color: black;
	border-width: 1px;
}