<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="fb-cards-designs">
<div class="fb-clone-card">
<div class="fb-card-main-content">
<div class="fb-card-header">
<div class="user-post-info">
<div class="user-thumb">
<img src="https://randomuser.me/api/portraits/med/men/75.jpg" class="img-responsive" />
</div>
<div class="user-information">
<p>Brad gibson</p>
<small>1 hr</small>
</div>
</div>
<div class="post-action">
<i class="fas fa-ellipsis-h"></i>
</div>
</div>
<div class="fb-card-body simple-text-card">
<p>I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.</p>
</div>
</div>
<div class="fb-card-like-comment-holder">
<div class="fb-card-like-comment">
</div>
</div>
<div class="fb-card-actions-holder">
<div class="fb-card-actions">
<div class="fb-btn-holder">
<a href="#"><i class="far fa-thumbs-up"></i> Like</a>
</div>
<div class="fb-btn-holder">
<a href="#"><i class="far fa-comment-alt"></i> Comment</a>
</div>
<div class="fb-btn-holder">
<a href="#"><i class="far fa-share-square"></i> Share</a>
</div>
</div>
</div>
<div class="fb-card-comments">
<div class="comment-input-holder">
<div class="user-thumb">
<img src="https://randomuser.me/api/portraits/women/85.jpg" class="img-responsive" />
</div>
<div class="comment-input">
<div class="comment-box" placeholder="Write a comment..." contenteditable="true" placeholder="write a comment"></div>
</div>
</div>
</div>
</div>
</div>
<div class="created-by" style="text-align:center;margin-bottom:16px;">
<a href="https://github.com/karthikricssion/facebook-card-design">Complete code in github</a>
</div>
