JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<div class="row">

	
	<div class="col-md-2">	
                <div class="hexagon1">
			<br><br><br><br><br>
			<div class="hexagon2">
				<br>
				<div class="hexagon3">
					<img src="http://achphotography.com/wp-content/uploads/2013/09/London-baby-portraits_1.jpg" alt="" style="width:180px;height:180px;">
				</div>
			</div>
			<p align="center"><b> Name Name </b></p>
			<p align="center"><i> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </i></p>
		</div>
	</div>

	<div class="col-md-2">	
                <div class="hexagon1">
			<br><br><br><br><br>
			<div class="hexagon2">
				<br>
				<div class="hexagon3">
					<img src="http://achphotography.com/wp-content/uploads/2013/09/London-baby-portraits_1.jpg" alt="" style="width:180px;height:180px;">
				</div>
			</div>
			<p align="center"><b> Name Name </b></p>
			<p align="center"><i> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </i></p>
		</div>
	</div>


	<div class="col-md-2">	
                <div class="hexagon1">
			<br><br><br><br><br>
			<div class="hexagon2">
				<br>
				<div class="hexagon3">
					<img src="http://achphotography.com/wp-content/uploads/2013/09/London-baby-portraits_1.jpg" alt="" style="width:180px;height:180px;">
				</div>
			</div>
			<p align="center"><b> Name Name </b></p>
			<p align="center"><i> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </i></p>
		</div>
	</div>

	<div class="col-md-2">	
                <div class="hexagon1">
			<br><br><br><br><br>
			<div class="hexagon2">
				<br>
				<div class="hexagon3">
					<img src="http://achphotography.com/wp-content/uploads/2013/09/London-baby-portraits_1.jpg" alt="" style="width:180px;height:180px;">
				</div>
			</div>
			<p align="center"><b> Name Name </b></p>
			<p...

CSS

.container {
        			position:relative;
        			width:1500px;
    			}
    			.hexagon1 {
	    			width: 200px;
	    			height: 600px;
	    			background: #8996a6;
		    		-webkit-clip-path: polygon(50% 16%, 100% 25%, 100% 75%, 50% 83%, 0% 75%, 0% 25%);
        			clip-path: polygon(50% 16%, 100% 25%, 100% 75%, 50% 83%, 0% 75%, 0% 25%);
        			margin-top: -90px;
    			}
    			.hexagon2 {
	    			width: 200px;
	   	 		height: 220px;
	    			background: #1f4188;
	    			-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			margin-top: -5px;	

    			}    
	    		.hexagon3 {
    				width: 180px;
	    			height: 185px;
	 	   		background: #ffffff;
	    			-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
				margin-left: 10px;
	
    			}    
	
			
			/* Center the demo */
			html, body { height: 100%; }
			body {
				display: flex;
				justify-content: center;
				align-items: center;
			}