JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<section>
  <div class="area-btns">
    <a href="https://github.com/pedronuness" target="_blank"><i class="fab fa-github-square fa-2x"></i>GitHub</a>
    <a href="https://www.facebook.com/pedronuness10"><i class="fab fa-facebook fa-2x"></i>Facebook</a>
    <a href="https://twitter.com/Vector2500"><i class="fab fa-twitter-square fa-2x"></i>Twitter</a>
  </div>
</section>

CSS

/*-----------Primeira Imagem----------*/

div#one img{width: 100%;}

.area-btns{
	margin: -300px 0 0 400px;
	position: absolute;
	display: flex;
}

.area-btns a{
	display: flex;
    align-items: center;
	margin-right: 40px;
	border: 2px solid #fff;
	width: 150px;
	height: 50px;
	cursor: pointer;
	padding: 0 10px;
	font-size: 20px;	
	background-color: rgba(100, 100, 100, 0.69);
}
.area-btns a i{
	float: left;
	margin-right: 15px;
	color: rgba(0, 0, 0, 0.79);
}
.area-btns a:hover{background-color: #191919;}
.area-btns a:hover i{color: #fff;}

/*----------Segunda Imagem----------*/