JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
        <a href="#">
            <div class="circleoutline">
				<!-- <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-128.png"> -->
            </div>
        </a>
    </div>

CSS

body
	{
		background-image: url(http://cdn.playbuzz.com/cdn/20b7c734-ef8e-438c-8d02-8353fbfd06cb/40bd6a7e-2809-4008-82da-d3c68a07f1ae.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
	}
	.circle
	{
		width: 106px;
		height: 106px;
		border-radius: 155px;
		background-color: grey;
		top: 18px;
		left: 10px;
  		overflow:hidden;
	}

	.circleoutline
	{
		position: relative;
		width: 120px;
		height: 120px;
		border-radius: 150px;
  		-webkit-border-radius:150px;
		left: -11px;
		top: -11px;
	}