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">a</div>
        <div class="friend">Some text</div>
        <div class="family"></div>
        <div class="friend"></div>
        <div class="family">&nbsp;</div>

	</body>
</html>

CSS

div {
    display: inline-block;
    vertical-align: baseline;
	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;
}