JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="wrapper">
	<div class="row">
		<div class="col-xs-6 col-sm-3">
			<div class="thumbnail wrapper">
				<img src="koala.jpg" class="img-responsive"/>
				<div class="logo">
					<img src="starbuck.png" class="img-responsive"/>
				</div>
				
				<div class="title">Starbuck</div>
				<div class="content">
					<ul>
						<li>Free Moccacino</li>
						<li>Buy 1 get 3</li>
					</ul>
				</div>				
				<span class="masa-berlaku">Berlaku hingga 05-09-2020</span>
			</div>
		</div>
		<div class="col-xs-6 col-sm-3">
			<div class="thumbnail wrapper">
				<img src="koala.jpg" class="img-responsive"/>
				<div class="logo">
					<img src="mcd.png" class="img-responsive"/>
				</div>
				<div class="title">Mcd</div>
				<div class="content">
					Buy 1 get 1
				</div>
				<span class="masa-berlaku">Berlaku hingga 25-11-2020</span>		
			</div>
		</div>
		<div class="col-xs-6 col-sm-3">
			<div class="thumbnail">
				<img src="koala.jpg" class="img-responsive"/>
				<div class="logo">
					<img src="kaskus.png" class="img-responsive"/>
				</div>
				<div class="title">Martabak</div>
				<div class="content">
					Buy 1 get 1
				</div>
				<span class="masa-berlaku">Berlaku hingga 15-11-2020</span>		
			</div>
		</div>
		<div class="col-xs-6 col-sm-3">
			<div class="thumbnail wrapper">
				<img src="koala.jpg" class="img-responsive"/>
				<div class="logo">
					<img src="kfc.png" class="img-responsive"/>
				</div>
				<div class="title">KFC</div>
				<div class="content">
					Buy 1 get 5
				</div>
				<span class="masa-berlaku">Berlaku hingga 25-11-2020</span>		
			</div>
		</div>
	</div>
  </div>
</div>

CSS

.wrapper{

}

.logo{
		width:80px;
		position:relative;
		top:-40px;
		margin-left:20px;
		border:1px solid gray;
		padding:5px;
		background:white;
	}
	
	.title{
		font-size:22px;
		font-weight:bold;
		background:yellow;
		position:relative;
		top:-20px;
		margin-left:20px
	}
	
	.content{
		margin-left:20px;
		height:70px;
	}
	
	.content ul{
		padding-left:20px;
	}
	
	.masa-berlaku{
		margin-left:20px;
		color:blue;
		vertical-align:bottom;
		cursor:pointer;
	}