JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<body>
<div>
  <span><img src="https://medya-cdn.tjk.org/formaftp/7723.jpg" alt="Girl in a jacket" width="39" height="45"> </span>
</div>
<h1>
YÜCELAY
</h1>


</body>

CSS

body {
	background-color: grey;
}
div {
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 50px;
  
	/* border-style: dotted; */
	border-style: solid;
  border-radius: 100%;
  border-width: 7px;
  
  border-bottom-color: #97c7eb;
  border-left-color: #001120;
  border-right-color: transparent;
  border-top-color: #97c7eb;
  
  transform: rotateZ(45deg);
	
	background-color: #fff;
	float: left;
	z-index: 31;
}

span {
  display: block;
  transform: rotateZ(-45deg);
}
img {
	border-radius: 35px;
	margin: 6px 0px 0px 6px;
}
h1 {
	float: left;
	margin: 32px 0px 0px -18px;
	z-index: 30;
	font: 700 48px Arial, sans-serif;
	position: relative;
}