JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend">Some text in more than two line, actually in 3</div>
        <div class="family">Some text in two line</div>
        <div class="friend" id="best_friend"></div>
        <div class="enemy" id="archnemesis"></div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family"></div>

	</body>
</html>

CSS

div {
    display: inline-block;
	margin-left: 5px;
	height:100px;
    width:100px;
    border-radius: 100%;
    border: 2px solid black;
}

.friend {
   border: 2px dashed #008000;  
}

.family {
    border: 2px dashed #0000FF;
}

.enemy {
    border: 2px dashed #FF0000;
}

#best_friend {
    border:4px solid #00C957;
}
#archnemesis {
    border: 4px solid #CC0000;
}