JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flat UI Buttons</title>
	<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col twelve">			
		</div>
	</div>

		<div class="row">
		<div class="col three">				
			<a href="#" class="btn btn-sunflower">İLETİŞİM</a>			
		</div>

		<div class="col three">
			<a href="#" class="btn btn-red">İLETİŞİM</a>			
		</div>
        
		<div class="col three">
			<a href="#" class="btn btn-sea">İLETİŞİM</a>		
		</div>
        
        <div class="col three">
			<a href="#" class="btn btn-dark-blue">İLETİŞİM</a>					
		</div>

	
</body>
</html>

CSS

<!--CSS-->

<style>
/*CSS for a really simple responsive grid*/
body{font-family:Open Sans; color:#555555;}
h1{font-size:24px; font-weight:normal; margin:0.4em 0;}

.container { width: 100%; margin: 0 auto; }
.container .row { float: left; clear: both; width: 100%; }
.container .col { float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em; }
.container .col.one, .container .col.two, .container .col.three, .container .col.four, .container .col.five, .container .col.six, .container .col.seven, .container .col.eight, .container .col.nine, .container .col.ten, .container .col.eleven, .container .col.twelve { width: 100%; }


@media screen and (min-width: 767px) {
  .container{width: 100%; max-width: 1080px; margin: 0 auto;}
  .container .row{width:100%; float:left; clear:both;}
  .container .col{float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
  .container .col.one { width: 8.33%; }
  .container .col.two { width: 16.66%; }
  .container .col.three { width: 24.99%; }
  .container .col.four { width: 50%; }
  .container .col.five { width: 41.65%; }
  .container .col.six { width: 49.98%; }
  .container .col.seven { width: 58.31%; }
  .container .col.eight { width: 66.64%; }
  .container .col.nine { width: 74.97%; }
  .container .col.ten { width: 83.3%; }
  .container .col.eleven { width: 91.65%; }
  .container .col.tweleve { width: 100%; }
}

/*All the button styles*/

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
a{text-decoration:none;}

/********************
GENERIC BUTTON STYLES
********************/
.btn {font-size: 18px; white-space:nowrap; width:100%; padding:.8em 1.5em; font-family: Open Sans, Helvetica,Arial,sans-serif; line-height:18px; display: inline-block;zoom: 1; color: #fff; text-align: center; position:relative; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s...