JSFiddle - React, Tailwind, and code Playground

by kybernaut

HTML

<h3>Title</h3>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

<h3>Title</h3>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

<div class="col-1-4">
<img src="" />
<h1>box title</h1>
<p>small text</p>
<div id="login" onclick="OpenPage('link');">Login</div>
</div>

CSS

#login {
	background:#000000;
	color:#FFFFFF;
	padding:5px 15px 5px 5px;
	text-align:right;
	border:1px solid #000000;
}
#login:hover {
	background:#F36F25;
	border:1px solid #FFFFFF;
	cursor:pointer;
}
#login:a {
	text-decoration:none;
}
.title {
	margin-left:10px;
	margin-bottom:20px;
	font-size:18px;
	font-weight:bold;
}

/* global */
.col-1-4 {
	background:#F36F25;
	color:#FFFFFF;
	padding: 8px;
	margin:5px 5px 5px 5px;
	display: inline-block;
    width: 22%;
}
h3 {float:none}