JSFiddle - React, Tailwind, and code Playground

by ciroxxx

HTML

<div id="chat_help" style="display:block">
	<p>
		<span class="is_not_active">
            <div class="arrow"></div>
            <div class="rectangle"></div>
        </span>					
	</p>
	<p>indica che sei stato contattato</p>
	<p>
        <span class="eye"></span>
        <span>blah blah blah</span>
    </p>
	<p>
        <span class="eye">
            <span class="bar"></span>
        </span>
        <span>blah blah blah</span>
    </p>
	<a href="#">chiudi</a>
</div>

SCSS

body {
  // Just for demo purposes
  font-size:1em;
  padding:0 0 0 1em;
}


span.is_not_active div.arrow{
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 20px solid red;
	position: absolute;
	top: 0px;
	left:0px;
}

span.is_not_active div.rectangle{
	position: absolute;
	top: 6px;
	left: 20px;
	width: 15px;
	height: 8px;
	background-color: red;
}


span.eye {
	display: inline-block;
	margin-right: 1em;
	width:1em;
	height:1em;
	background: #000;
	position: relative;
	border-radius:65% 0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
span.eye:before, span.eye:after {
	content: "";
	position: absolute;
	display: block;
	top:50%;
	left:50%;
	border-radius:100%;
}
span.eye:before {
    height:.5em;
    width:.5em;
    background: #eee;
    margin-top:-.25em;
    margin-left:-.25em;
  }
span.eye:after {
    height:.25em;
    width:.25em;
    background: #000;
    margin-top:-.125em;
    margin-left:-.125em;
}

span.bar{
    display: inline-block;
    width:0.15em;
    height:1.4em;
    background: #000;
    position: absolute;
    margin-left:0.47em;
    margin-top:-0.2em;   
}