7+ CSS Instagram Clone Examples

This post contains a total of 7+ Hand-Picked CSS Instagram Clone Examples with Source Code. All these Instagram Clones are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Instagram Clone Examples

1. By George W. Park

Made by George W. Park. Instagram Profile Layout with CSS Grid & Flexbox, it has hover effect and Loading animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  
<style>
/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 310). 
        
The 'supports' rule will only run if your browser supports CSS grid.

Flexbox and floats are used as a fallback so that browsers which don't support grid will still recieve a similar layout.

*/

/* Base Styles */

:root {
    font-size: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", Arial, sans-serif;
    min-height: 100vh;
    background-color: #fafafa;
    color: #262626;
    padding-bottom: 3rem;
}

img {
    display: block;
}

.container {
    max-width: 93.5rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    font: inherit;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.btn:focus {
    outline: 0.5rem auto #4d90fe;
}

.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Profile Section */

.profile {
    padding: 5rem 0;
}

.profile::after {
    content: "";
    display: block;
    clear: both;
}

.profile-image {
    float: left;
    width: calc(33.333% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;
}

.profile-image img {
    border-radius: 50%;
}

.profile-user-settings,
.profile-stats,
.profile-bio {
    float: left;
    width: calc(66.666% - 2rem);
}

.profile-user-settings {
    margin-top: 1.1rem;
}

.profile-user-name {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 300;
}

.profile-edit-btn {
    font-size: 1.4rem;
    line-height: 1.8;
    border: 0.1rem solid #dbdbdb;
    border-radius: 0.3rem;
    padding: 0 2.4rem;
    margin-left: 2rem;
}

.profile-settings-btn {
    font-size: 2rem;
    margin-left: 1rem;
}

.profile-stats {
    margin-top: 2.3rem;
}

.profile-stats li {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-right: 4rem;
    cursor: pointer;
}

.profile-stats li:last-of-type {
    margin-right: 0;
}

.profile-bio {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.3rem;
}

.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
    font-weight: 600;
}

/* Gallery Section */

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem -1rem;
    padding-bottom: 3rem;
}

.gallery-item {
    position: relative;
    flex: 1 0 22rem;
    margin: 1rem;
    color: #fff;
    cursor: pointer;
}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.gallery-item-info {
    display: none;
}

.gallery-item-info li {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 600;
}

.gallery-item-likes {
    margin-right: 2.2rem;
}

.gallery-item-type {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}

.fa-clone,
.fa-comment {
    transform: rotateY(180deg);
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Loader */

.loader {
    width: 5rem;
    height: 5rem;
    border: 0.6rem solid #999;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin: 0 auto;
    animation: loader 500ms linear infinite;
}

/* Media Query */

@media screen and (max-width: 40rem) {
    .profile {
        display: flex;
        flex-wrap: wrap;
        padding: 4rem 0;
    }

    .profile::after {
        display: none;
    }

    .profile-image,
    .profile-user-settings,
    .profile-bio,
    .profile-stats {
        float: none;
        width: auto;
    }

    .profile-image img {
        width: 7.7rem;
    }

    .profile-user-settings {
        flex-basis: calc(100% - 10.7rem);
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .profile-user-name {
        font-size: 2.2rem;
    }

    .profile-edit-btn {
        order: 1;
        padding: 0;
        text-align: center;
        margin-top: 1rem;
    }

    .profile-edit-btn {
        margin-left: 0;
    }

    .profile-bio {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }

    .profile-edit-btn,
    .profile-bio,
    .profile-stats {
        flex-basis: 100%;
    }

    .profile-stats {
        order: 1;
        margin-top: 1.5rem;
    }

    .profile-stats ul {
        display: flex;
        text-align: center;
        padding: 1.2rem 0;
        border-top: 0.1rem solid #dadada;
        border-bottom: 0.1rem solid #dadada;
    }

    .profile-stats li {
        font-size: 1.4rem;
        flex: 1;
        margin: 0;
    }

    .profile-stat-count {
        display: block;
    }
}

/* Spinner Animation */

@keyframes loader {
    to {
        transform: rotate(360deg);
    }
}

/*

The following code will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling. 

*/

@supports (display: grid) {
    .profile {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 3rem;
        align-items: center;
    }

    .profile-image {
        grid-row: 1 / -1;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        grid-gap: 2rem;
    }

    .profile-image,
    .profile-user-settings,
    .profile-stats,
    .profile-bio,
    .gallery-item,
    .gallery {
        width: auto;
        margin: 0;
    }

    @media (max-width: 40rem) {
        .profile {
            grid-template-columns: auto 1fr;
            grid-row-gap: 1.5rem;
        }

        .profile-image {
            grid-row: 1 / 2;
        }

        .profile-user-settings {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-gap: 1rem;
        }

        .profile-edit-btn,
        .profile-stats,
        .profile-bio {
            grid-column: 1 / -1;
        }

        .profile-user-settings,
        .profile-edit-btn,
        .profile-settings-btn,
        .profile-bio,
        .profile-stats {
            margin: 0;
        }
    }
}
</style>
</head>
<body>
  <header>

	<div class="container">

		<div class="profile">

			<div class="profile-image">

				<img src="https://images.unsplash.com/photo-1513721032312-6a18a42c8763?w=152&h=152&fit=crop&crop=faces" alt="">

			</div>

			<div class="profile-user-settings">

				<h1 class="profile-user-name">janedoe_</h1>

				<button class="btn profile-edit-btn">Edit Profile</button>

				<button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button>

			</div>

			<div class="profile-stats">

				<ul>
					<li><span class="profile-stat-count">164</span> posts</li>
					<li><span class="profile-stat-count">188</span> followers</li>
					<li><span class="profile-stat-count">206</span> following</li>
				</ul>

			</div>

			<div class="profile-bio">

				<p><span class="profile-real-name">Jane Doe</span> Lorem ipsum dolor sit, amet consectetur adipisicing elit πŸ“·βœˆοΈπŸ•οΈ</p>

			</div>

		</div>
		<!-- End of profile section -->

	</div>
	<!-- End of container -->

</header>

<main>

	<div class="container">

		<div class="gallery">

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1511765224389-37f0e77cf0eb?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 56</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1497445462247-4330a224fdb1?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 89</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 5</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-type">

					<span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 42</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 1</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1502630859934-b3b41d18206c?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-type">

					<span class="visually-hidden">Video</span><i class="fas fa-video" aria-hidden="true"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 38</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 0</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1498471731312-b6d2b8280c61?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-type">

					<span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 47</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 1</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1515023115689-589c33041d3c?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 94</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 3</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1504214208698-ea1916a2195a?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-type">

					<span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>

				</div>

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 52</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 4</li>
					</ul>

				</div>

			</div>

			<div class="gallery-item" tabindex="0">

				<img src="https://images.unsplash.com/photo-1515814472071-4d632dbc5d4a?w=500&h=500&fit=crop" class="gallery-image" alt="">

				<div class="gallery-item-info">

					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 66</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
					</ul>

				</div>
			</div>
			<div class="gallery-item" tabindex="0">
				<img src="https://images.unsplash.com/photo-1511407397940-d57f68e81203?w=500&h=500&fit=crop" class="gallery-image" alt="">
				<div class="gallery-item-type">
					<span class="visually-hidden">Gallery</span><i class="fas fa-clone" aria-hidden="true"></i>
				</div>
				<div class="gallery-item-info">
					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 45</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 0</li>
					</ul>
				</div>
			</div>
			<div class="gallery-item" tabindex="0">
				<img src="https://images.unsplash.com/photo-1518481612222-68bbe828ecd1?w=500&h=500&fit=crop" class="gallery-image" alt="">
				<div class="gallery-item-info">
					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 34</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 1</li>
					</ul>
				</div>
			</div>
			<div class="gallery-item" tabindex="0">
				<img src="https://images.unsplash.com/photo-1505058707965-09a4469a87e4?w=500&h=500&fit=crop" class="gallery-image" alt="">
				<div class="gallery-item-info">
					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 41</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 0</li>
					</ul>
				</div>
			</div>
			<div class="gallery-item" tabindex="0">
				<img src="https://images.unsplash.com/photo-1423012373122-fff0a5d28cc9?w=500&h=500&fit=crop" class="gallery-image" alt="">
				<div class="gallery-item-type">
					<span class="visually-hidden">Video</span><i class="fas fa-video" aria-hidden="true"></i>
				</div>
				<div class="gallery-item-info">
					<ul>
						<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 30</li>
						<li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End of gallery -->
		<div class="loader"></div>
	</div>
	<!-- End of container -->
</main>
</body>
</html>

2. By Romi Bohmra

Made by Romi Bohmra. Mobile Instagram Clone made using CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
    font-family: 'Open Sans', sans-serif;
  
}
.mobile{
  width: 360px;
  height: 640px;
  border: 2px solid black;
  border-radius: 20px;
  padding: 0px 0;
  overflow-y: scroll;
  display: block;
  margin: auto auto;
 }
.mobile::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.mobile {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.header p{
  font-weight: 600;
  margin-top: 10px;
  font-size: 18px;
}
.header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  position: sticky;
  top:0;
  background-color: white;
}
.bio{
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  padding: 0 15px;
}
.profile-picture{
  border: 2px solid black;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  background-image: url('https://img.icons8.com/color/48/000000/user-female-skin-type-5.png');
  background-repeat: no-repeat;
  background-position: center;
}
.number{
  font-weight: 600;
  line-height: 0;
}
.content{
  font-size: 14px;
}
.name{
  font-weight:600;
  line-height:0.5;
  font-size:14px;
  padding: 0 15px;
}
.bio-content{
  font-size: 14px;
  line-height: 0.3;
  padding: 0 15px;
}
.edit-profile{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0 15px;
}
.edit-box{
  border: 1px solid #ddd;
  width: 90%;
  padding: 5px 0;
  border-radius: 4px;
  text-align: center;
}
.arrow-box{
  border: 1px solid #ddd;
  padding: 5px 8px;
  border-radius: 4px;
}
.edit-box p{
  margin: 0 auto;
  font-size: 14px;
  font-weight: 600;
}
.story{
  margin-top: 20px;
  padding: 0 15px;
}
.story p{
  font-size: 14px;
  line-height: 0.5;
}
.story-highlights{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;

}
.one{
  background-image: url('https://img.icons8.com/bubbles/50/000000/airport.png');
  background-repeat: no-repeat;
  background-position: center;
}
.two{
  background-image: url('https://img.icons8.com/bubbles/50/000000/new-delhi.png');
  background-repeat: no-repeat;
  background-position: center;
}
.three{
   background-image:url('https://img.icons8.com/bubbles/50/000000/hamburger.png');
  background-repeat: no-repeat;
  background-position: center;
}
.story-one{
  width: 40px;
  height:40px;
  border: 1px solid black;
  border-radius: 100%;
  margin-left: -20px;
}
.four{
  background-image: url('https://img.icons8.com/android/24/000000/plus.png');
  background-repeat: no-repeat;
  background-position: center;
}
.five{
  background-color: #e5e4e2;
  border: 1px solid #e5e4e2;
}
.profile-tab{
  display:flex;
  justify-content: space-around;
  margin: 30px 0 0;
  width: 100%;
  
}
.tab-one{
  border-bottom: 1px solid black;
  width: 50%;
  text-align: center;
  
}
.tab-two{
  width: 50%;
  text-align: center;
  border-bottom: 1px solid #e5e4e2;
}
.images{
  display: flex;
  
}
.image-one{
  width: 33.333333%;
  text-align: center;
  padding: 10px 0;
}
.img{
  border-top: 1px solid black;
}
.center-image{
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.bottom-navbar{
  display: flex;
  justify-content: space-between;
  padding: 8px 15px;
  position: sticky;
  background-color: white;
  bottom:0;
  
}
.navitem img{
  width: 30px;
}
.last-item{
  border: 1px solid black;
  border-radius: 100%;
  background-image: url('https://img.icons8.com/color/48/000000/user-female-skin-type-5.png');
  width: 30px;
  background-position: center;
  background-size: 25px;
}
</style>
</head>
<body>
  <div class="mobile">
  <div class="header">
    <div class="header-part-one"> <p>romi<span><img src="https://img.icons8.com/ios/30/000000/expand-arrow--v3.png" style="width: 10px;"/></span></p></div>
    <div class="header-part-two">
       <img src="https://img.icons8.com/ios/50/000000/plus-2-math.png" style="width: 30px;"/>
    <img src="https://img.icons8.com/ios-filled/50/000000/menu--v2.png" style="width: 30px; margin-left: 10px;"/>
    </div>
   </div>
  <div class="bio">
   <div class="profile-picture"></div>
  <div class="follow-flex"><p class="number">14</p><p class="content">Posts</p></div>
    <div class="follow-flex"><p class="number">230</p><p class="content">Followers</p></div>
    <div class="follow-flex"><p class="number">400</p><p class="content">Following</p></div>
 </div>
  <p class="name">Romi Bohmra</p>
  <p class="bio-content">Hi peeps!</p>
  <div class="edit-profile">
    <div class="edit-box">
      <p>Edit Profile</p>
    </div>
    <div class="arrow-box">
      <img src="https://img.icons8.com/ios/30/000000/expand-arrow--v3.png" style="width: 10px;"/>
    </div>
  </div>
  <div class="story">
    <p style=" font-weight: 600;">Story Highlights</p>
    <p>Keep your favourite stories on your profile</p>
    <div class="story-highlights">
      <div class="story-one one"></div>
      <div class="story-one two"></div>
      <div class="story-one three"></div>
      <div class="story-one four"></div>
      <div class="story-one five"></div>
    </div>
  </div>
  <div class="profile-tab">
    <div class="tab-one">
       <img src="https://img.icons8.com/small/16/000000/grid.png"/>
    </div>
    <div class="tab-two">
       <img src="https://cdn0.iconfinder.com/data/icons/instagram-ui-1/24/Instagram-UI_tagged-512.png" style="width:20px;"/>
    </div>
 </div>
  <div class="images">
    <div class="image-one">
      <img src="https://img.icons8.com/cute-clipart/64/000000/national-park.png"/>
    </div>
    <div class="image-one center-image">
      <img src="https://img.icons8.com/cute-clipart/64/000000/pineapple.png"/>
    </div>
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/cat.png"/>
    </div>
  </div>
   <div class="images img">
    <div class="image-one">
     <img src="https://img.icons8.com/dusk/64/000000/music-library.png"/>
    </div>
    <div class="image-one center-image">
     <img src="https://img.icons8.com/dusk/64/000000/user-female-skin-type-7.png"/>
    </div>
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/shopping-cart.png"/>
    </div>
  </div>
   <div class="images img">
    <div class="image-one">
     <img src="https://img.icons8.com/dusk/64/000000/coconut-cocktail.png"/>
    </div>
    <div class="image-one center-image">
     <img src="https://img.icons8.com/dusk/64/000000/beach.png"/>
    </div>
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/campfire.png"/>
    </div>
  </div>
  <div class="images img">
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/statue-of-liberty.png"/>
    </div>
    <div class="image-one center-image">
      <img src="https://img.icons8.com/dusk/64/000000/bowling-pins.png"/>
    </div>
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/girl-running--v1.png"/>
    </div>
  </div>
  <div class="images img">
    <div class="image-one">
      <img src="https://img.icons8.com/dusk/64/000000/cafe.png"/>
    </div>
    <div class="image-one center-image">
     <img src="https://img.icons8.com/dusk/64/000000/potted-plant.png"/>
    </div>
    <div class="image-one">
     <img src="https://img.icons8.com/dusk/64/000000/the-toast.png"/>
    </div>
  </div>
  <div class="bottom-navbar">
    <div class="navitem">
      <img src="https://img.icons8.com/fluency-systems-filled/64/000000/home.png"/>
    </div>
    <div class="navitem">
      <img src="https://img.icons8.com/ios-glyphs/48/000000/search.png"/>
    </div>
    <div class="navitem">
      <img src="https://img.icons8.com/ios/50/000000/instagram-reel.png"/>
    </div>
    <div class="navitem">
      <img src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-heart-miscellaneous-kiranshastry-lineal-kiranshastry.png"/>
    </div>
     <div class="navitem last-item">
      
     </div>
  </div>
</div>
</body>
</html>

3. By Dinçer Efe Bolut

Made by Dinçer Efe Bolut. Instagram Homepage Clone using Bootstrap CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
      <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- Icons -->
    <script src="https://kit.fontawesome.com/3ef707b5e9.js" crossorigin="anonymous"></script>
  <title></title>
<style>
body {
    padding-top: 60px;
    background-color: #FAFAFA;
}
i {
    font-size: 25px;
}

.dropdown-item i {
    font-size: 20px;
    padding-right:10px;
}

nav {
    padding: 60px 0 60px 0;
    background: #FFFFFF;
}

.nav-brand {
    height: 29px;
}

.user {
    margin-top: 4px;
    margin-left: 15px;
}

nav input::placeholder {
    background-image: url(assets/search-solid.svg);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-right: 20px;
}

nav input {
    height: 36px;
    padding: 0px 32px 0px 32px;
    background-color: #EFEFEF;
    border: none;
}

.stories-user {
    height: 118px;
    padding: 16px 0px 0px 16px;
    margin-bottom:24px;
    background: #FFFFFF;
    overflow-y: hidden;
    overflow-x: scroll;
}

.stories {
  margin-left: 15px;
  cursor: pointer;
}

.ig-user {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  margin-right: 14px;
  cursor: pointer;
}

.ig-username {
  padding: 2px;
  color: #262626;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 14px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.asd a {
  color: #C7C7C7;
}

.threedots {
  float: right;
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  clear: both;
}

.stories-user-user img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 2px;
  border: 2px solid rgb(238, 39, 82);
}

.stories-user-user p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  color: black;
  margin-top: 7px;
}

.buttons {
  height: 54px;
  padding: 6px 16px 8px;
  margin-top: 4px;
}

.buttons i {
  padding: 8px;
  cursor: pointer;
}

.likes {
  height: 18px;
  margin-bottom: 8px;
  padding: 0 20px;
}

.likes b {
  font-weight: bold;
  cursor: pointer;
}

.description {
  padding: 0px 20px;
}

.description b {
  cursor: pointer;
}

.graytext {
  color: #8E8E8E;
  cursor: pointer;
}

.time {
  font-size: 10px;
  padding-left: 20px;
  margin-bottom: 16px;
}

.comment {
  padding: 6px 20px;
  height: 53px;
}

.comment input {
  box-sizing: box-sizing;
  border: none;
  margin-top: -20px;
}

.comment input::placeholder {
  padding-bottom: 15px;
}

.comment i {
  padding: 8px 16px 8px 0;
}

.container {
    padding-top: 30px;
}

.bluetext {
  cursor: pointer;
}

.photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgb(238, 39, 82);
    margin-left: -15px;
}

.usernamer {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', Helvetica,'Neue', sans-serif;
      font-size: 15px;
      color: black;
      margin-left: 20px;
}

.foryou {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
      sans-serif;
    font-size: 15px;
    color: gray;
    font-weight: bold;
}

.sticky-bar {
  position: fixed;
}

.firstlike-image {
  height: 32px;
  width: 32px;
  border: #FFFFFF solid 3px;
  border-radius: 50%;
  cursor: pointer;
}

.likesimg {
  height: 32px;
  width: 32px;
  border: #FFFFFF solid 3px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: -25px;
}

.comment input:focus {
  outline: none;
}

i {
  cursor: pointer;
}
</style>
</head>
  <body>
    <!-- Nav Start -->
    <nav class="navbar navbar-expand-lg navbar-light border-bottom fixed-top">
        <img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" class="navbar-brand" style="margin-left: 19%;"href="#">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="d-none d-lg-block collapse navbar-collapse d-flex justify-content-center ml-5" id="navbarSupportedContent" >
        <form class="form-inline ml-5">
            <input class="d-none d-lg-block form-control border-0" type="search" placeholder="Search" aria-label="Search" style="width: 268px;border-radius: 8px; background: #EFEFEF;">
          </form>
        </div>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto" style="margin-right: 75%;">

            <li class="nav-item active">
              <a class="nav-link" href="#"><i class="fas fa-home"></i><span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item telegram-icon active">
              <a class="nav-link" href="#"><i class="far fa-paper-plane"></i></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#"><i class="far fa-plus-square"></i></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#"><i class="far fa-compass"></i></a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#"><i class="far fa-heart"></i></a>
              </li>
                <li class="nav-item">
                    <div class="dropdown">
                        <img class="user border-1 border-primary rounded-circle" 
                        src="https://picsum.photos/id/237/100/100" height="32px" width="32px"
                        type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                          <a class="dropdown-item" href="#"><i class="far fa-user"></i> Profile</a>
                          <a class="dropdown-item" href="#"><i class="far fa-bookmark"></i>Saved</a>
                          <a class="dropdown-item" href="#"><i class="fas fa-sliders-h"></i>Settings</a>
                          <a class="dropdown-item border-bottom" href="#"><i class="fas fa-exchange-alt"></i>Switch Accounts</a>
                          <a class="dropdown-item" href="#">Log Out</a>
                        </div>
                      </div>
                </li>
          </ul>
        </div>
      </nav> <!--Nav End-->
      <div class="container offset-lg-2 mt-4 middlearea"">
          <div class="row">
              <div class="col-sm-12 col-lg-8">
                <!-- 
                                             
                                            -Start -->
                <div class="stories-user card"">
                  <div class="stories-user-user" style="display: flex;justify-content: flex-start;">
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/407/100/100">
                      <p>lorem.ipsum</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/12/100/100">
                      <p>dolor_sit.</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/23/100/100">
                      <p>kudos</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/35/100/100">
                      <p>taco.taco</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/56/100/100">
                      <p>user2334</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/94/100/100">
                      <p>ametconsec</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/923/100/100">
                      <p>adipis.elit.</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/532/100/100">
                      <p>et_dicta!</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/106/100/100">
                      <p>volup.autem</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/234/100/100">
                      <p>d.tenetur</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/78/100/100">
                      <p>ipsafuga</p>
                    </div>
                    <div style="text-align: center;" class="stories">
                      <img src="https://picsum.photos/id/563/100/100">
                      <p>praetium?</p>
                    </div>
                  </div>
                </div> <!-- Stories End -->
                <div class="card mb-4"> <!--Card Start-->
                  <div style="height: 60; padding: 14px 4px 14px 16px;"> <!--Photo Start-->
                    <img class ="ig-user" src="https://picsum.photos/id/234/100/100">
                    <span class="ig-username">d.tenetur</span>
                    <i class="threedots fas fa-ellipsis-h mr-2"></i>
                  </div>
                  <img src="https://picsum.photos/id/533/1200/800" class="card-img-top img-fluid" alt="..."> <!--Photo End-->
                  <div class="buttons"> <!-- Buttons Start-->
                    <i class="far fa-heart"></i>
                    <i class="far fa-comment"></i>
                    <i class="far fa-paper-plane"></i>
                    <i class="far fa-bookmark" style="float: right; clear: both"></i>
                  </div> <!-- Buttons End-->
                  <div class="likes"> <!-- Likes Start-->
                    <img class ="firstlike-image" src="https://picsum.photos/id/103/100/100">
                    <img class ="likesimg" src="https://picsum.photos/id/200/100/100">
                    <img class ="likesimg" src="https://picsum.photos/id/124/100/100">
                    <span>Liked by <b>dolor_sit</b> and <b>227 others</b></span>
                  </div> <!-- Likes End-->
                  <div class="description pt-3"> <!-- Comments Start-->
                    <span><b>d.tetetur</b> Hic vel nam molestiae repellendus</span><br>
                    <span class="graytext">View all 43 comment</span><br>
                    <span><b>elonmusk</b> Awesome</span><br>
                    <span><b>d.efe.b</b> Great  πŸ’ͺ πŸ’ͺ πŸ’ͺ</span><br>
                  </div>
                  <div class="time">
                    <span class="graytext">18 HOURS AGO</span>
                  </div>
                  <div class="comment border border-top">
                    <i class="far fa-smile"></i>
                    <input class="w-50" style="height: 40px; padding-top: 15px;" type="text" placeholder="Add a comment...">
                    <span style="float: right; clear: both; font-weight: bold; padding: 8px 8px 8px 0;" class="graytext">Post</span>
                  </div> <!-- Comments End-->
                </div> <!--Card End-->
                <div class="card mb-4"> <!--Card Start-->
                  <div style="height: 60; padding: 14px 4px 14px 16px;"> <!--Photo Start-->
                    <img class ="ig-user" src="https://picsum.photos/id/213/100/100">
                    <span class="ig-username">kartes</span>
                    <i class="threedots fas fa-ellipsis-h mr-2"></i>
                  </div>
                  <img src="https://picsum.photos/id/113/1200/800" class="card-img-top img-fluid" alt="..."> <!--Photo End-->
                  <div class="buttons"> <!-- Buttons Start-->
                    <i class="far fa-heart"></i>
                    <i class="far fa-comment"></i>
                    <i class="far fa-paper-plane"></i>
                    <i class="far fa-bookmark" style="float: right; clear: both"></i>
                  </div> <!-- Buttons End-->
                  <div class="likes"> <!-- Likes Start-->
                    <img class ="firstlike-image" src="https://picsum.photos/id/123/100/100">
                    <img class ="likesimg" src="https://picsum.photos/id/209/100/100">
                    <img class ="likesimg" src="https://picsum.photos/id/112/100/100">
                    <span>Liked by <b>lorem.ipsum</b> and <b>1234 others</b></span>
                  </div> <!-- Likes End-->
                  <div class="description pt-3"> <!-- Comments Start-->
                    <span><b>d.tetetur</b> Hic vel nam molestiae repellendus</span><br>
                    <span class="graytext">View all 462 comment</span><br>
                    <span><b>a.acar</b> Awesome</span><br>
                    <span><b>kernces</b> This photo is the definition of beauty</span><br>
                  </div>
                  <div class="time">
                    <span class="graytext">19 HOURS AGO</span>
                  </div>
                  <div class="comment border border-top">
                    <i class="far fa-smile"></i>
                    <input class="w-50" style="height: 40px; padding-top: 15px;" type="text" placeholder="Add a comment...">
                    <span style="float: right; clear: both; font-weight: bold; padding: 8px 16px 8px 0;" class="graytext">Post</span>
                  </div> <!-- Comments End-->
                </div> <!--Card End-->
                  <div class="card mb-4"> <!--Card Start-->
                    <div style="height: 60; padding: 14px 4px 14px 16px;">
                      <img class ="ig-user" src="https://picsum.photos/id/407/100/100">
                      <span class="ig-username">lorem.ipsum</span>
                      <i class="threedots fas fa-ellipsis-h mr-2"></i>
                    </div>
                    <img src="https://picsum.photos/id/573/1200/800" class="card-img-top img-fluid" alt="...">
                    <div class="buttons">
                      <i class="far fa-heart"></i>
                      <i class="far fa-comment"></i>
                      <i class="far fa-paper-plane"></i>
                      <i class="far fa-bookmark" style="float: right; clear: both"></i>
                    </div>
                    <div class="likes"><b>174 likes</b></div>
                    <div class="description">
                      <span><b>lorem.ipsum</b> Dolor sit amet consectetur adipisicing elit. Hic vel nam molestiae repellendus incidunt quae deserunt...</span><br>
                      <span class="graytext">more</span><br>
                      <span class="graytext">View 1 comment</span>
                    </div>
                    <div class="time">
                      <span class="graytext">22 HOURS AGO</span>
                    </div>
                    <div class="comment border border-top">
                      <i class="far fa-smile"></i>
                      <input class="w-50" style="height: 40px; padding-top: 15px;" type="text" placeholder="Add a comment...">
                      <span style="float: right; clear: both; font-weight: bold; padding: 8px 16px 8px 0;" class="graytext">Post</span>
                    </div>
                  </div> <!--Card End-->
              </div>
              <div class="d-none d-lg-block col-lg-4">
                <div class="card-body d-flex sticky-bar" style="width: 22rem;" >
                  <div>
                    <a class="nav-link" href="https://www.instagram.com/d.efe.b/">
                      <span>
                        <img src="https://picsum.photos/id/237/60/60" class="photo"/>
                        <span class="usernamer">
                          <div style="display: inline;">
                            <strong>d.efe.b</strong>
                            <p style="margin-left:70px; margin-top: -25px;" class="graytext">Dinçer Efe Bolut</p>
                          </div>
                        </span>
                        <span style="position:absolute; margin-top: -45px; margin-left: 260px; font-size: 12px; font-weight: bold;" class="bluetext">Switch</span>
                      </span>
                    </a>
                    <div class="mt-2">
                      <span
                        class="mt-5 foryou">Suggestions For You</span>
                      <span
                        class="float-right postuserfont mt-1"
                        style="font-size: 12px"
                        ><strong>See All</strong></span
                      >
                    </div>
                    <div class="mt-2 ml-2">
                      <div>
                        <span>
                          <img src="https://picsum.photos/id/654/60/60" style="width: 30px; height: 30px; border-radius: 50%"/>
                        </span>
                          <span class="usernamer">
                            <div style="display: inline;margin-left: -15px; margin-top: -15px;">
                            <a href="#" style="color: #262626;">
                              <b>eossoluta</b>
                            </a>
                              <p style="margin-left: 39px; margin-top: -12px;font-size: 12px;" class="graytext">Followed by lorem.ipsum + 10 more</p>
                            </div>
                          </span>
                        <span class="postuserfont bluetext float-right" style="font-size: 13px; color: #0095f6; position:absolute; margin-top: -45px; margin-left: 260px; ">
                          <strong>Follow</strong>
                        </span>
                      </div>
                      <div class="mt-3">
                        <span>
                          <img src="https://picsum.photos/id/324/60/60" style="width: 30px; height: 30px; border-radius: 50%"/>
                        </span>
                          <span class="usernamer">
                            <div style="display: inline;margin-left: -15px; margin-top: -15px;">
                            <a href="#" style="color: #262626;">
                              <b>mahmutabi</b>
                            </a>
                              <p style="margin-left: 39px; margin-top: -12px;font-size: 12px;" class="graytext">Followed by kernces + 10 more</p>
                            </div>
                          </span>
                        <span class="postuserfont bluetext float-right" style="font-size: 13px; color: #0095f6; position:absolute; margin-top: -45px; margin-left: 260px; ">
                          <strong>Follow</strong>
                        </span>
                      </div>
                      <div class="mt-3">
                        <span>
                          <img src="https://picsum.photos/id/936/60/60" style="width: 30px; height: 30px; border-radius: 50%"/>
                        </span>
                          <span class="usernamer">
                            <div style="display: inline;margin-left: -15px; margin-top: -15px;">
                            <a href="#" style="color: #262626;">
                              <b>metars</b>
                            </a>
                              <p style="margin-left: 39px; margin-top: -12px;font-size: 12px;" class="graytext">Followed by kutair + 10 more</p>
                            </div>
                          </span>
                        <span class="postuserfont bluetext float-right" style="font-size: 13px; color: #0095f6; position:absolute; margin-top: -45px; margin-left: 260px; ">
                          <strong>Follow</strong>
                        </span>
                      </div>
                      <div class="mt-3">
                        <span>
                          <img src="https://picsum.photos/id/92/60/60" style="width: 30px; height: 30px; border-radius: 50%"/>
                        </span>
                          <span class="usernamer">
                            <div style="display: inline;margin-left: -15px; margin-top: -15px;">
                            <a href="#" style="color: #262626;">
                              <b>terast</b>
                            </a>
                              <p style="margin-left: 39px; margin-top: -12px;font-size: 12px;" class="graytext">Followed by _katiokra_ + 10 more</p>
                            </div>
                          </span>
                        <span class="postuserfont bluetext float-right" style="font-size: 13px; color: #0095f6; position:absolute; margin-top: -45px; margin-left: 260px; ">
                          <strong>Follow</strong>
                        </span>
                      </div>
                      <div class="mt-3">
                        <span>
                          <img src="https://picsum.photos/id/472/60/60" style="width: 30px; height: 30px; border-radius: 50%"/>
                        </span>
                          <span class="usernamer">
                            <div style="display: inline;margin-left: -15px; margin-top: -15px;">
                            <a href="#" style="color: #262626;">
                              <b>kurtpri</b>
                            </a>
                              <p style="margin-left: 39px; margin-top: -12px;font-size: 12px;" class="graytext">Followed by tutori + 15 more</p>
                            </div>
                          </span>
                        <span class="postuserfont bluetext float-right" style="font-size: 13px; color: #0095f6; position:absolute; margin-top: -45px; margin-left: 260px; ">
                          <strong>Follow</strong>
                        </span>
                      </div>
                    </div>
                    
                    <div class="asd ml-2 mt-2" style="color: lightgray; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
                      <span><a href="https://about.instagram.com/" target="_blank" class="rightpanellinks">About</a>-<a href="https://help.instagram.com/" target="_blank" class="rightpanellinks">Help</a>-<a href="https://about.instagram.com/blog/" class="rightpanellinks">Press</a>-<a href="https://www.instagram.com/developer/" class="rightpanellinks">API</a>-<a href="https://www.instagram.com/about/jobs/" class="rightpanellinks">Jobs</a>-<a href="https://www.instagram.com/legal/privacy/" class="rightpanellinks">Privacy</a>-</span>
                        <span><a href="https://www.instagram.com/legal/terms/" class="rightpanellinks">Terms</a>-<a href="https://www.instagram.com/explore/locations/" class="rightpanellinks">Locations</a>-<a href="https://www.instagram.com/directory/profiles/" class="rightpanellinks">Top Accounts</a>-<a href="https://www.instagram.com/directory/hashtags/" class="rightpanellinks">Konu Etiketleri</a>-Languages</span>
                        <p></p>
                      <p style="font-size: 12px;">Β© 2022 INSTAGRAM FROM DINCER EFE BOLUT</p>
                    </div>
                  </div>

              </div>
          </div>
      </div>
</body>
</html>

4. By itisdanish

Made by itisdanish. Instagram Post UI Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
<style>
.avatar {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.fa.fa-navicon.iconcss {
  float: right;
  color: red;
  text-align: right;
}

.iconcss {
  font-size: 1.2em;
}
.fontsize2 {
  font-size: 1.2em;
}

.fontsize {
  font-size: 1.4em;
}

.d-flex.justify-content-end.margin {
  margin-right: -0.6em;
}

.date {
  font-size: 0.8em;
  color: #999;
}

.redHeart {
  color: red;
}

.marginCust2 {
  margin-top: 2px;
  margin-bottom: 5px;
}
.marginCust {
  margin-top: 0;
  margin-bottom: 0;
}


.fa.fa-heart.redHeart {
  float: right;
  font-size: 1em;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-6">
      <h1 class="text-center">Instagram</h1>
      <div class="card text-left  shadow-sm p-3 mb-5 bg-white rounded">
        <div>
          <div>
            <div class="d-flex">
              <div class="col-sm-6 d-flex p-2 mt-1"><img class="avatar" src="https://i.ibb.co/gjj0vfc/pic.jpg">
                <h6 class="pt-3 ml-2">itisdanish</h6>
              </div>
              <div class="col-sm-6 d-flex p-2 mt-3 justify-content-end"><i class="fa fa-ellipsis-v iconcss"></i>
              </div>
            </div>
          </div><img class="img-fluid mt-2" src="https://i.ibb.co/BfSkfpq/post.jpg">
          </div>
        <div class="div p-1">
          <div class="d-flex fontsize mt-1">
            <div class="col-sm-6 d-flex p-1"><i class="fa fa-heart mr-2 redHeart"></i><i class="far fa-comment mr-2"></i><i class="far fa-paper-plane"></i>
            </div>
            <div class="col-sm-6">
              <div class="d-flex justify-content-end margin"><i class="far fa-bookmark fontsize2"></i>
              </div>
            </div>
          </div>
          <p class="marginCust2">Liked by&nbsp;<strong>itisdanish&nbsp;</strong>and<strong>&nbsp;76 others</strong><br>
          </p>
          <p class="fontweight marginCust2" style="font-weight: normal;"><strong>itisdanish </strong>The adventures&nbsp;πŸ’›&nbsp;begins just outside your comfort zone πŸ€ͺ<br><a href="https://www.instagram.com/explore/tags/goadiaries/">#travel</a>&nbsp;<a href="https://www.instagram.com/explore/tags/goadiaries/">#explore</a>&nbsp;<br></p>
          <p class="date marginCust">View all 24 comments<br></p>
          <p class="marginCust fontweight"><strong>streets_traveler </strong>Wow Amazing πŸ‘Œ<i class="fa fa-heart redHeart"></i><br></p>
          <p class="date marginCust">10 June</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

5. By Farshid

Made by Farshid. Instagram Profile Page Clone with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <title></title>
  
<style>
.container{
  max-width: 999px;
}
.center-search{
  margin-left: 25%;
}
.border_silver{
  border-color: #dbdbdb!important;
}
.item{
  width: 100px;
}
.container-article {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #303030;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.9;
}

.container-article:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
a:link {
  color: #000;
  text-decoration: none;

}
a:visited {
  color: #000;
  text-decoration: none;

}
a:hover {
  color: black;
  text-decoration: none;

}
.footer-font{
  font-size: small;
}
.modal-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 0!important;
  padding-right: 1rem!important;
}
.navbar-light .navbar-nav .nav-link {
  color: rgb(0 0 0);
}
.comment-widgets .comment-row:hover {
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer
}

.comment-widgets .comment-row {
  border-bottom: 1px solid rgba(120, 130, 140, 0.13);
  padding: 15px
}

.comment-text:hover {
  visibility: hidden
}

.comment-text:hover {
  visibility: visible
}

.label {
  padding: 3px 10px;
  line-height: 13px;
  color: #ffffff;
  font-weight: 400;
  border-radius: 4px;
  font-size: 75%
}

.round img {
  border-radius: 100%
}

.label-info {
  background-color: #1976d2
}

.label-success {
  background-color: green
}

.label-danger {
  background-color: #ef5350
}

.action-icons a {
  padding-left: 7px;
  vertical-align: middle;
  color: #99abb4
}

.action-icons a:hover {
  color: #1976d2
}

.mt-100 {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  .center-search{
    margin-left: 0;
  }
  .item{
    width: 40px;
  }
  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row!important;
     flex-direction: row!important; 
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
}
</style>
</head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom border_silver">
            <div class="container">
                <a class="navbar-brand" href="#"><img src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png" width="100px" /></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <form class="d-flex center-search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                    </form>

                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-dark">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#"><i class="fa-solid fa-house  fa-xl"></i></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#"><i class="fa-brands fa-telegram fa-xl"></i></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa-solid fa-plus fa-xl"></i></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#"><i class="fa-solid fa-compass fa-xl"></i></a>
                     </li>
                     <li class="nav-item">
                      <a class="nav-link" href="#"><i class="fa-regular fa-heart fa-xl"></i></a>
                     </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                              <img src="https://www.thispersondoesnotexist.com/image" class="rounded-circle img-fluid" alt="..." width="25px" />
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><hr class="dropdown-divider" /></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <main class="container mt-4">
            <section id="header" class="row">
                <section class="col-md-4 col-3 text-center">
                    <img src="https://www.thispersondoesnotexist.com/image" class="rounded-circle img-fluid" alt="..." width="150px" />
                </section>
                <section class="col-md-8 col-7 ps-4 mt-3">
                    <h1 class="h4 fs-4">Farshid</h1>
                    <strong>179 </strong>posts<strong class="ms-3">179 </strong>followers<strong class="ms-3">179 </strong>following <br />
                    <h2 class="h6 mt-1">Web Developer</h2>
                    <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or</p>
                    <a href="https://farshid.dk/?ref=igc" target="_blank" class="text-primary bold"><strong>farshid.dk</strong></a>
                </section>
            </section>

            <div class="owl-carousel owl-theme mt-5">
              <a href="https://unsplash.it/1200/768.jpg?image=331" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=331" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=132" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=132" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=233" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=233" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=334" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=334" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=335" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=335" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=336" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=336" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=337" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=337" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=338" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=338" class="rounded-circle img-fluid">
              </a>
              <a href="https://unsplash.it/1200/768.jpg?image=339" data-toggle="lightbox" data-gallery="example-gallery" class="item">
                <img src="https://unsplash.it/600.jpg?image=339" class="rounded-circle img-fluid">
              </a>
               
            </div>

            <section class="row mt-5">
                <article class="col-md-4 mt-4">
                    <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                        <div class="container-article">
                            <img src="https://unsplash.it/800/800.jpg?image=251" alt="post title" class="image" />
                            <div class="overlay">
                                <div class="text">Hello World</div>
                            </div>
                        </div>
                    </a>
                </article>
                <article class="col-md-4 mt-4">
                  <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                    <div class="container-article">
                          <img src="https://unsplash.it/800/800.jpg?image=252" alt="post title" class="image" />
                          <div class="overlay">
                                <div class="text">Hello World</div>
                            </div>
                        </div>
                    </a>
                </article>
                <article class="col-md-4 mt-4">
                  <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                    <div class="container-article">
                          <img src="https://unsplash.it/800/800.jpg?image=253" alt="post title" class="image" />
                          <div class="overlay">
                                <div class="text">Hello World</div>
                            </div>
                        </div>
                    </a>
                </article>
                <article class="col-md-4 mt-4">
                  <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                    <div class="container-article">
                          <img src="https://unsplash.it/800/800.jpg?image=254" alt="post title" class="image" />
                          <div class="overlay">
                                <div class="text">Hello World</div>
                            </div>
                        </div>
                    </a>
                </article>
                <article class="col-md-4 mt-4">
                  <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                    <div class="container-article">
                          <img src="https://unsplash.it/800/800.jpg?image=255" alt="post title" class="image" />
                          <div class="overlay">
                                <div class="text">Hello World</div>
                            </div>
                        </div>
                    </a>
                </article>
                <article class="col-md-4 mt-4">
                  <a data-bs-toggle="modal" data-bs-target="#exampleModal" type="button">
                    <div class="container-article">
                        <img src="https://unsplash.it/800/800.jpg?image=256" alt="post title" class="image" />
                        <div class="overlay">
                              <div class="text">Hello World</div>
                          </div>
                      </div>
                  </a>
              </article>
            </section>
        </main>
        <footer class="container mt-5 mb-5 px-3 text-center footer-font">
          <a href="#" class="px-2">About</a>
          <a href="#" class="px-2">Blog</a>
          <a href="#" class="px-2">Jobs</a>
          <a href="#" class="px-2">Help</a>
          <a href="#" class="px-2">API</a>
          <a href="#" class="px-2">Privacy</a>
          <a href="#" class="px-2">Terms</a>
          <a href="#" class="px-2">Top Accounts</a>
          <a href="#" class="px-2">Hashtags</a>
          <a href="#" class="px-2">Locations</a>
        </footer>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
             
              <div class="modal-body row">
                <div class="col-md-6 modal-image sticky-top">
                  <img src="https://unsplash.it/800/1200.jpg?image=256" class="img-fluid sticky-top">
                </div>
                <div class="col-md-6 p-3">
                 
                  <h3 class="mt-3">Post title</h3>
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                  <br>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 <p>Edited Β· 1d</p>
                 <div class="mt-2 mx-2">
                   <input type="text" class="form-control" placeholder="type comment">
                 </div>


                 <div class="d-flex flex-row comment-row mt-2">
                  <div class="p-2"><span class="round"><img src="https://www.thispersondoesnotexist.com/image" alt="user" width="50"></span></div>
                  <div class="comment-text active w-100">
                      <h5>Jonty Andrews</h5>
                      <div class="comment-footer"> <span class="date">March 13, 2020</span> <span class="label label-success">Approved</span> <span class="action-icons active"> <a href="#" data-abc="true"><i class="fa fa-pencil"></i></a> <a href="#" data-abc="true"><i class="fa fa-rotate-right text-success"></i></a> <a href="#" data-abc="true"><i class="fa fa-heart text-danger"></i></a> </span> </div>
                      <p class="m-b-5 m-t-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites</p>
                  </div>
                </div>

                <div class="d-flex flex-row comment-row mt-2">
                  <div class="p-2"><span class="round"><img src="https://www.thispersondoesnotexist.com/image" alt="user" width="50"></span></div>
                  <div class="comment-text active w-100">
                      <h5>Jonty Andrews</h5>
                      <div class="comment-footer"> <span class="date">March 13, 2020</span> <span class="label label-success">Approved</span> <span class="action-icons active"> <a href="#" data-abc="true"><i class="fa fa-pencil"></i></a> <a href="#" data-abc="true"><i class="fa fa-rotate-right text-success"></i></a> <a href="#" data-abc="true"><i class="fa fa-heart text-danger"></i></a> </span> </div>
                      <p class="m-b-5 m-t-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites</p>
                  </div>
                </div>

                <div class="d-flex flex-row comment-row mt-2">
                  <div class="p-2"><span class="round"><img src="https://www.thispersondoesnotexist.com/image" alt="user" width="50"></span></div>
                  <div class="comment-text active w-100">
                      <h5>Jonty Andrews</h5>
                      <div class="comment-footer"> <span class="date">March 13, 2020</span> <span class="label label-success">Approved</span> <span class="action-icons active"> <a href="#" data-abc="true"><i class="fa fa-pencil"></i></a> <a href="#" data-abc="true"><i class="fa fa-rotate-right text-success"></i></a> <a href="#" data-abc="true"><i class="fa fa-heart text-danger"></i></a> </span> </div>
                      <p class="m-b-5 m-t-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites</p>
                  </div>
                </div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
</body>
</html>

6. By Ronny Tejada

Made by Ronny Tejada. Instagram Follow page Clone. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<style>
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #FAFAFA;

}

.principal{
    display: grid;  
    align-self: center;
    width: 100%;
    height: 100vh;
    background-color: #FAFAFA;
    grid-template-columns: minmax(90px,90px) auto;
    grid-template-rows: 60px auto;
    grid-template-areas: "header  header "
                         "discover discover"
                         "explore explore"
 }

 /*--------------------header-----------------------*/
.back-header{
    background-color: #FFFFFF;
    border-bottom: 1px solid #DBDBDB;
    position: fixed;
    top: auto;
    width: 100%;
    height: 60px;
    z-index: 1;
}
header{
    grid-area: header;
    justify-self: center;
    width: 75%;
    z-index: 2;
    height: 60px;

    top: auto;

    background-color: #FFFFFF;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;   
    justify-content: space-between;
    grid-gap: 20px;
    grid-template-areas: "logo busqueda botones" ;
}

header .contenedor-logo{
    grid-area: logo;
    display: flex;
    align-items: center;
    color: red;
    font-family: 'Lobster', cursive;


}

header .contenedor-logo a{
    text-decoration: none;
    color: black;
    font-size: 30px;
    position: fixed;

}


header .barra-busqueda{
    grid-area: busqueda;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    text-align: center;
    

}

header .barra-busqueda input{
    min-width: 214px;
    height: 29px;
    background-color: #FAFAFA;
    border: 1px solid #DBDBDB;
    border-radius: 3px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    position: fixed;

}
header .btns-header{
    grid-area: botones;
    display: flex;
    margin-bottom: 15px;
    align-self: center;
    justify-self: center; 
    
}

header .btns-header button{
    background: none;
    border: none;
    justify-self: flex-end;
    width: 50px;
    font-size: 24px;

}
i{
    position: fixed;

}
header .btns-header img{
    width: 26px;
    height: 26px;
    border-radius: 100%;
    position: fixed;

}
/*----------------DISCOVER---------------------------*/
.discover{
    grid-area: discover;
    margin-top: 5%;
    display: flex;
    flex-direction: row;
    width: 75%;
    justify-self: center;
    align-self: center;
    background-color: #FAFAFA;

}

.discover .card{
    width: 176px;
    height: 198px;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    background-color: #FFFFFF;
    display: flex;
    align-self: center;
    margin-right: 23px;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: space-between;
}



.discover .card img{
    width: 55px;
    height: 55px;
    border-radius: 100%;
    border: 1px solid #C42ACE;
    margin-top: 15px;
}

.discover .card p{
    margin-bottom: 20px;
    
}
.discover .card button{
    background-color: #0095F6;
    color: white;
    width: 60px;
    height: 29px;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    margin-bottom: 20px;
}

/*--------------------------EXPLORE--------------------------------------*/

.explore{
    grid-area: explore;
    margin-top: 10%;
    width: 80%;
    display: flex;
    flex-direction: row ;
    justify-self: center;
    text-align: center;
    background-color: #FAFAFA;
}

.explore img{
    width: 293px;
    height: 293px;
    margin-right: 28px;
    margin-bottom: 28px;    
}

/*----------------RESPONSIVE-------------------------*/
@media(max-width: 1213px){
    .explore{
        width: 100%;
        
    }
}

@media(max-width: 1016px){
     .discover{
        display: none;
    }

    .explore img{
        width: 212px;
        height: 212px;
        margin-right: 3px;
        margin-bottom: 0.1px;    
    }

    header .btns-header button{
        background: none;
        border: none;
        justify-self: flex-start;
        width: 35px;
        font-size: 15px;
    
    }
    i{
        margin-left: 80px;
    }
    header .btns-header img{
        width: 15px;
        height: 15px;
        border-radius: 100%;
        position: fixed;
        margin-left: 80px;
    
    }
    header .contenedor-logo a{
        font-size: 20px;
    } 
}

@media(max-width: 735px){
    
    .discover{
        display: none;
    }
    .header{
        width: 100%;
    }
    header .barra-busqueda input{
        min-width: 187px;
        height: 23px;
        background-color: #FAFAFA;
        border: 1px solid #DBDBDB;
        border-radius: 3px;
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        position: fixed;
    
    }
    header .btns-header button{
        background: none;
        border: none;
        justify-self: flex-start;
        width: 35px;
        font-size: 15px;
    }
    i{
        margin-left: 80px;
    }
    header .btns-header img{
        width: 15px;
        height: 15px;
        border-radius: 100%;
        position: fixed;
        margin-left: 75px;
    }
    header .contenedor-logo a{
        font-size: 20px;
    }

    .explore img{
        width: 212px;
        height: 212px;
        margin-right: 0.1px;
        margin-bottom: 0.1px;    
    }
}

@media(max-width: 644px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: flex;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 212px;
        height: 212px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 637px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: flex;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 190px;
        height: 190px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 572px){
    
    header .barra-busqueda input{
        min-width: 5%;
        height: 23px;
        
    
    }
    header .btns-header button{
        background: none;
        border: none;
        justify-self: flex-start;
        width: 25px;
        font-size: 15px;
    
    }
    header .btns-header img{
        margin-left: 10%;

    }
    i{
        margin-left: 10%;
    }
    
    header .contenedor-logo a{
        font-size: 15px;
        margin-left: -5%;
    }

    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: flex;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 170px;
        height: 170px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 511px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: flex;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 160px;
        height: 160px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}



@media(max-width: 481px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: inline;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 150px;
        height: 150px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 451px){
    header{
        align-items: center;
        align-content: center;
        text-align: center;
    }
    header .barra-busqueda{
       display: none;
        
    
    }
    header .btns-header{
        display: none;
    
    }
    header .contenedor-logo a{
        font-size: 30px;
        margin-left: 16%;
        
    }
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: inline;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 140px;
        height: 140px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 421px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: inline;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 110px;
        height: 110px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}

@media(max-width: 331px){
    .explore{
        grid-area: explore;
        margin-top: 10%;
        width: 100%;
        display: inline;
        flex-direction: none ;
        justify-self: none;
        text-align: center;
        
    }
    .explore img{
        width: 90px;
        height: 90px;
        margin-right: -2px ;
        margin-bottom: -2px ;    
    }
    
}
</style>
</head>
<body>
    <div class="principal">
            <header>
                    <div class="contenedor-logo">
                        <a href="#"><span class="logo">INSTAGRAM</span> </a>
                    </div>
                    <div class="barra-busqueda">
                        <input type="text" placeholder="search">
                    </div>
                    <div class="btns-header">
                        <button><i class="fas fa-home"></i></button>
                        <button><i class="fas fa-location-arrow"></i></button>
                        <button><i class="far fa-compass"></i></button>
                        <button><i class="far fa-heart"></i></button>
                        <button><img src="https://i.ibb.co/HnPjfwv/naruto.jpg" alt=""></button>

                    </div>
            </header>
            <div class="back-header">  
            </div>
        <div class="discover">

            <div class="card">
                <span><img src="https://i.ibb.co/Swpp6kJ/sativa.jpg" alt=""></span>
                <p>tayshasativa</p>
                <button>Follow</button>
            </div>
            <div class="card">
                <span><img src="https://i.ibb.co/QMQr7B0/69.jpg" alt=""></span>
                <p>6ix9ine</p>
                <button>Follow</button>
            </div>
            <div class="card">
                <span><img src="https://i.ibb.co/HnPjfwv/naruto.jpg" alt=""></span>
                <p>narutouzumaki</p>
                <button>Follow</button>
            </div>
            <div class="card">
                <span><img src="https://i.ibb.co/Bc5RRDn/travis.jpg" alt=""></span>
                <p>travisscott</p>
                <button>Follow</button>
            </div>
            <div class="card">
                <span><img src="https://i.ibb.co/cFfG1wC/cb.jpg" alt=""></span>
                <p>chrisbrownofficial</p>
                <button>Follow</button>
            </div>
        </div>
        <div class="explore">
            <div class="imagen">
                <img src="https://via.placeholder.com/300" alt="" id="i0">
                <img src="https://via.placeholder.com/300" alt="" id="i1">
                <img src="https://via.placeholder.com/300" id="i2" alt="">
                <img src="https://via.placeholder.com/300" alt="" id="i3">
                <img src="https://via.placeholder.com/300" id="i4" alt="">
                <img src="https://via.placeholder.com/300" id="i5" alt="">
                <img src="https://via.placeholder.com/300" id="i6" alt="">
                <img src="https://via.placeholder.com/300" id="i7" alt="">
                <img src="https://via.placeholder.com/300" alt="" id="i8">
                <img src="https://via.placeholder.com/300" alt="" id="i9">
                <img  src="https://via.placeholder.com/300" alt="" id="i10">
                <img src="https://via.placeholder.com/300" alt="" id="i11">
                <img src="https://via.placeholder.com/300" alt="" id="i12">
                <img src="https://via.placeholder.com/300" alt="" id="i13">
                <img src="https://via.placeholder.com/300" id="i14" alt="">
                <img src="https://via.placeholder.com/300" alt="" id="i15">
                <img src="https://via.placeholder.com/300" id="i16" alt="">
                <img src="https://via.placeholder.com/300" id="i17" alt="">
                <img src="https://via.placeholder.com/300" id="i18" alt="">
                <img src="https://via.placeholder.com/300" id="i19" alt="">
                <img src="https://via.placeholder.com/300" alt="" id="i20">
                <img src="https://via.placeholder.com/300" alt="" id="i21">
                <img  src="https://via.placeholder.com/300" alt="" id="i22">
                <img src="https://via.placeholder.com/300" alt="" id="i23">
                
            </div>
        </div>
    </div>
    <script src="https://kit.fontawesome.com/06e2c17d40.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
</body>
</html>

7. By sanskarsakya

Made by sanskarsakya. Tailwind CSS Instagram Clone. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css'>
<style>
.h-70 {
  height: 70px;
}

.h-293 {
  height: 293px;
}

.w-293 {
  width: 293px;
}

.w-950 {
  width: 950px;
}

.m-14 {
  margin: 14px;
}

.-ml-14 {
  margin-left: -14px;
}

.ml-365 {
  margin-left: 365px;
}

.bg-gray-custom {
  background: #fafafa;
}
</style>
</head>
<body>
  <div class="">
        <div class="w-full h-70 bg-white flex justify-around shadow">

            <div class="flex items-center">
                <svg class="mr-4"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0)">
                        <path
                            d="M6.93 0.065C5.92765 0.0790862 4.93571 0.270366 4 0.63C3.20385 0.918887 2.48518 1.38774 1.9 2C1.28761 2.6066 0.81049 3.3359 0.499997 4.14C0.155528 5.07268 -0.032012 6.056 -0.0550027 7.05C-0.120003 8.325 -0.120003 8.74 -0.120003 12C-0.120003 15.26 -0.120003 15.66 -0.0550027 16.95C-0.032012 17.944 0.155528 18.9273 0.499997 19.86C0.799028 20.6699 1.27768 21.4016 1.9 22C2.4973 22.5975 3.21248 23.0641 4 23.37C4.93146 23.7201 5.91518 23.9111 6.91 23.935C8.185 24 8.6 24 11.86 24C15.12 24 15.52 24 16.81 23.935C17.8064 23.911 18.7918 23.7201 19.725 23.37C20.5305 23.0795 21.2603 22.6112 21.86 22C22.4698 21.401 22.9438 20.678 23.25 19.88C23.6006 18.9487 23.7916 17.9649 23.815 16.97C23.88 15.695 23.88 15.28 23.88 12.02C23.88 8.76 23.88 8.36 23.815 7.07C23.8009 6.06766 23.6096 5.07571 23.25 4.14C22.9558 3.33008 22.4803 2.59811 21.86 2C21.2606 1.39309 20.5399 0.919446 19.745 0.61C18.8106 0.266774 17.8253 0.0825563 16.83 0.065C15.555 0 15.14 0 11.88 0C8.62 0 8.225 0 6.93 0.065V0.065ZM7.03 21.75C6.26657 21.7423 5.51031 21.6018 4.795 21.335C4.27608 21.145 3.80748 20.8389 3.425 20.44C3.02614 20.0575 2.72001 19.5889 2.53 19.07C2.26373 18.3545 2.12333 17.5984 2.115 16.835C2.065 15.575 2.05 15.195 2.05 11.985C2.05 8.775 2.05 8.41 2.115 7.135C2.12042 6.37623 2.26095 5.62449 2.53 4.915C2.72121 4.39523 3.02713 3.92525 3.425 3.54C3.8091 3.1443 4.27734 2.84012 4.795 2.65C5.51031 2.38315 6.26657 2.24272 7.03 2.235C8.29 2.185 8.67 2.17 11.88 2.17C15.09 2.17 15.455 2.17 16.73 2.235C17.4888 2.24043 18.2405 2.38096 18.95 2.65C19.466 2.84623 19.9347 3.14952 20.3251 3.53991C20.7155 3.93031 21.0188 4.39895 21.215 4.915C21.4806 5.62544 21.621 6.37657 21.63 7.135C21.695 8.39 21.695 8.77 21.695 11.985C21.695 15.2 21.695 15.56 21.63 16.835C21.6217 17.5984 21.4813 18.3545 21.215 19.07C21.0166 19.5848 20.7125 20.0523 20.3224 20.4424C19.9323 20.8325 19.4648 21.1366 18.95 21.335C18.2399 21.6018 17.4885 21.7423 16.73 21.75C15.475 21.8 15.09 21.815 11.88 21.815C8.67 21.815 8.305 21.815 7.03 21.75V21.75ZM16.845 5.58C16.845 5.86481 16.9295 6.14321 17.0877 6.38002C17.2459 6.61683 17.4708 6.8014 17.7339 6.91039C17.9971 7.01938 18.2866 7.04789 18.5659 6.99233C18.8453 6.93677 19.1018 6.79962 19.3032 6.59823C19.5046 6.39685 19.6418 6.14026 19.6973 5.86093C19.7529 5.5816 19.7244 5.29206 19.6154 5.02894C19.5064 4.76581 19.3218 4.54091 19.085 4.38268C18.8482 4.22445 18.5698 4.14 18.285 4.14C17.9035 4.14132 17.538 4.29345 17.2682 4.56322C16.9985 4.83299 16.8463 5.19849 16.845 5.58ZM5.725 12C5.72796 13.2179 6.09189 14.4076 6.77078 15.4187C7.44967 16.4299 8.41306 17.2171 9.5392 17.6809C10.6653 18.1447 11.9037 18.2642 13.0978 18.0244C14.2918 17.7846 15.388 17.1963 16.2478 16.3337C17.1076 15.4711 17.6924 14.373 17.9283 13.1782C18.1642 11.9833 18.0406 10.7454 17.5732 9.62075C17.1058 8.49612 16.3154 7.53529 15.3021 6.85968C14.2888 6.18408 13.0979 5.82401 11.88 5.825C11.0704 5.82631 10.269 5.98707 9.52151 6.29811C8.77404 6.60914 8.09516 7.06435 7.52361 7.63776C6.95207 8.21116 6.49906 8.89152 6.19045 9.63999C5.88184 10.3885 5.72368 11.1904 5.725 12V12ZM7.89 12C7.89 11.2089 8.12459 10.4355 8.56412 9.77772C9.00364 9.11992 9.62836 8.60723 10.3593 8.30448C11.0902 8.00173 11.8944 7.92252 12.6704 8.07686C13.4463 8.2312 14.159 8.61216 14.7184 9.17157C15.2778 9.73098 15.6588 10.4437 15.8131 11.2196C15.9675 11.9956 15.8883 12.7998 15.5855 13.5307C15.2828 14.2616 14.7701 14.8864 14.1123 15.3259C13.4545 15.7654 12.6811 16 11.89 16C10.8291 16 9.81172 15.5786 9.06157 14.8284C8.31142 14.0783 7.89 13.0609 7.89 12Z"
                            fill="#262626" />
                    </g>
                    <defs>
                        <clipPath id="clip0">
                            <rect width="24"
                                height="24"
                                fill="white" />
                        </clipPath>
                    </defs>
                </svg>
                <svg class="mr-4"
                    width="1"
                    height="28"
                    viewBox="0 0 1 28"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <line x1="0.5"
                        x2="0.5"
                        y2="28"
                        stroke="black" />
                </svg>
                <svg width="104"
                    height="29"
                    viewBox="0 0 104 29"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M5.35255 0.101682C3.22394 0.977517 0.883882 3.45186 0.144816 6.5577C-0.791154 10.4929 3.10385 12.157 3.42332 11.6114C3.79934 10.9702 2.72538 10.7534 2.50432 8.71166C2.21861 6.07454 3.46584 3.12785 5.03553 1.83493C5.3273 1.59472 5.31342 1.92906 5.31342 2.54747C5.31342 3.65335 5.25126 13.5809 5.25126 15.6528C5.25126 18.4563 5.13346 19.3416 4.92189 20.2164C4.70752 21.1029 4.36289 21.7019 4.62403 21.9326C4.9158 22.1907 6.16152 21.5768 6.88269 20.5874C7.74747 19.4008 8.05019 17.9757 8.10454 16.4281C8.17018 14.5626 8.16738 11.6023 8.17018 9.91379C8.17281 8.36517 8.19672 3.83047 8.14257 1.10437C8.12929 0.435719 6.24275 -0.265799 5.35245 0.100868L5.35255 0.101682ZM80.9396 13.2219C80.8709 14.6794 80.5427 15.8186 80.1354 16.6222C79.3468 18.1778 77.7104 18.6609 77.0156 16.4246C76.637 15.2056 76.6193 13.1697 76.8915 11.4687C77.1686 9.73574 77.9423 8.427 79.2235 8.54503C80.4872 8.6617 81.0787 10.2623 80.9396 13.2219V13.2219ZM59.636 22.2645C59.6188 24.6862 59.2311 26.8095 58.3996 27.4262C57.2203 28.3007 55.6352 27.6447 55.9635 25.8776C56.2539 24.3138 57.6273 22.7169 59.6393 20.7656C59.6393 20.7656 59.6435 21.2106 59.636 22.2645H59.636ZM59.3139 13.2078C59.2418 14.5353 58.8917 15.8689 58.5097 16.6224C57.7213 18.178 56.073 18.6643 55.39 16.4248C54.923 14.8946 55.0348 12.9142 55.2659 11.6664C55.5657 10.0474 56.2926 8.54537 57.5979 8.54537C58.867 8.54537 59.4928 9.91401 59.3139 13.2079V13.2078ZM46.9727 13.1875C46.8954 14.5934 46.6163 15.7687 46.1685 16.6224C45.3584 18.1673 43.7557 18.6572 43.0488 16.4248C42.5392 14.815 42.7127 12.62 42.9247 11.4342C43.2393 9.67466 44.027 8.42717 45.2567 8.54537C46.5199 8.66668 47.1339 10.2625 46.9727 13.1876V13.1875ZM103.53 14.8297C103.221 14.8297 103.08 15.1426 102.963 15.6692C102.559 17.5004 102.134 17.9138 101.586 17.9138C100.973 17.9138 100.423 17.0071 100.282 15.1921C100.171 13.7648 100.189 11.1373 100.331 8.52353C100.36 7.98651 100.209 7.45517 98.7437 6.9319C98.1131 6.70683 97.1966 6.37543 96.7402 7.45826C95.4508 10.5175 94.9463 12.9462 94.8276 13.9329C94.8215 13.9839 94.7578 13.9944 94.7466 13.8751C94.671 13.0848 94.5019 11.6488 94.4809 8.63178C94.4768 8.04312 94.3499 7.54206 93.689 7.13184C93.2601 6.86566 91.9577 6.39488 91.4887 6.95496C91.0825 7.41301 90.6119 8.6457 90.123 10.1069C89.7257 11.2945 89.4489 12.0979 89.4489 12.0979C89.4489 12.0979 89.4541 8.89349 89.4589 7.67799C89.461 7.21943 89.141 7.06663 89.0445 7.03893C88.6102 6.91503 87.7546 6.70805 87.3914 6.70805C86.9432 6.70805 86.8335 6.95427 86.8335 7.31304C86.8335 7.36001 86.7628 11.532 86.7628 14.4492C86.7628 14.576 86.7628 14.7142 86.7641 14.8611C86.5162 16.2019 85.7124 18.022 84.8382 18.022C83.9629 18.022 83.55 17.261 83.55 13.7832C83.55 11.7544 83.6119 10.8722 83.6424 9.40478C83.6601 8.55957 83.6942 7.91052 83.6923 7.76323C83.6859 7.31156 82.8913 7.08391 82.5216 6.99977C82.1501 6.91493 81.8273 6.88207 81.5753 6.89618C81.2185 6.91596 80.9661 7.14603 80.9661 7.46246C80.9661 7.63212 80.968 7.95475 80.968 7.95475C80.5085 7.24497 79.7695 6.75095 79.2778 6.60779C77.9533 6.22116 76.5713 6.56374 75.5289 7.9976C74.7004 9.13687 74.201 10.4272 74.0044 12.2811C73.8607 13.6364 73.9076 15.0108 74.163 16.1731C73.8544 17.4846 73.2815 18.022 72.6541 18.022C71.7433 18.022 71.083 16.5607 71.1597 14.0334C71.2102 12.3711 71.5486 11.2046 71.9185 9.51696C72.0762 8.79754 71.9481 8.42088 71.6267 8.05988C71.3319 7.72882 70.7038 7.55968 69.8009 7.76771C69.1578 7.91603 68.2383 8.07554 67.397 8.19805C67.397 8.19805 67.4477 7.99897 67.4894 7.64796C67.7082 5.80716 65.6733 5.95651 65.024 6.54447C64.6364 6.89549 64.3726 7.30949 64.2725 8.05386C64.1137 9.23512 65.0938 9.79228 65.0938 9.79228C64.7723 11.2392 63.984 13.1294 63.1702 14.4959C62.7344 15.2281 62.4009 15.7707 61.9704 16.3474C61.9689 16.1326 61.9677 15.9179 61.9669 15.7042C61.957 12.6622 61.9982 10.268 62.0164 9.40506C62.0341 8.55987 62.0686 7.92803 62.0667 7.78074C62.0618 7.45037 61.8655 7.32561 61.4573 7.16765C61.0964 7.02794 60.6696 6.93123 60.2269 6.89751C59.6681 6.85466 59.3315 7.14598 59.3403 7.49046C59.342 7.5555 59.342 7.95487 59.342 7.95487C58.8824 7.24508 58.1434 6.75108 57.6517 6.60791C56.3272 6.22144 54.9452 6.56404 53.9028 7.99772C53.0745 9.13698 52.532 10.7357 52.3783 12.2671C52.2351 13.6944 52.2615 14.9073 52.4567 15.9291C52.2461 16.9522 51.6406 18.0221 50.956 18.0221C50.0808 18.0221 49.5828 17.2612 49.5828 13.7834C49.5828 11.7545 49.6447 10.8723 49.6752 9.40506C49.6929 8.55987 49.727 7.91065 49.7251 7.76353C49.7186 7.31185 48.924 7.0842 48.5543 6.99989C48.1675 6.91196 47.8335 6.87962 47.577 6.89819C47.2387 6.92297 47.0008 7.22083 47.0008 7.44297V7.95487C46.5413 7.24508 45.8022 6.75108 45.3105 6.60791C43.9861 6.22144 42.6118 6.56955 41.5616 7.99772C40.8768 8.92895 40.3224 9.96137 40.0371 12.2468C39.9547 12.9072 39.9183 13.5257 39.923 14.1038C39.6499 15.7453 38.4438 17.6374 37.4572 17.6374C36.8799 17.6374 36.3301 16.5367 36.3301 14.1908C36.3301 11.066 36.5268 6.61704 36.5601 6.18824C36.5601 6.18824 37.8066 6.16742 38.048 6.16466C38.6698 6.15795 39.2329 6.17241 40.0611 6.13077C40.4765 6.10995 40.8767 4.64461 40.448 4.46325C40.2537 4.38117 38.8804 4.30925 38.336 4.29789C37.8782 4.2877 36.6039 4.19499 36.6039 4.19499C36.6039 4.19499 36.7182 1.24194 36.7448 0.929991C36.7674 0.669992 36.4251 0.536127 36.2289 0.4549C35.7517 0.256509 35.3248 0.161521 34.8187 0.0589701C34.1196 -0.0828075 33.8024 0.0558726 33.7404 0.635916C33.6471 1.51623 33.5988 4.09468 33.5988 4.09468C33.0857 4.09468 31.3331 3.99609 30.8199 3.99609C30.343 3.99609 29.8284 6.01187 30.4876 6.03664C31.2461 6.06556 32.5679 6.09051 33.4442 6.11649C33.4442 6.11649 33.4052 10.6388 33.4052 12.035C33.4052 12.1835 33.4065 12.3266 33.4068 12.4653C32.9245 14.9363 31.2258 16.271 31.2258 16.271C31.5906 14.6363 30.8454 13.4088 29.5032 12.3697C29.0086 11.9868 28.0324 11.2618 26.9401 10.4675C26.9401 10.4675 27.5727 9.85454 28.1337 8.6215C28.5313 7.74808 28.5484 6.74853 27.5727 6.52812C25.9605 6.16367 24.6312 7.32754 24.2347 8.57005C23.9275 9.5326 24.0913 10.2469 24.6931 10.9888C24.7371 11.043 24.7847 11.0984 24.8339 11.1542C24.4699 11.8437 23.97 12.772 23.5466 13.4919C22.3713 15.4907 21.4834 17.0716 20.8125 17.0716C20.2761 17.0716 20.2833 15.4665 20.2833 13.9637C20.2833 12.6682 20.3806 10.7204 20.4583 8.70375C20.4841 8.03681 20.1448 7.65688 19.5761 7.31274C19.2305 7.10368 18.493 6.69261 18.0659 6.69261C17.4266 6.69261 15.5821 6.77812 13.8394 11.7335C13.6197 12.3581 13.1882 13.4962 13.1882 13.4962L13.2254 7.53712C13.2254 7.39741 13.1497 7.26233 12.9763 7.16992C12.6827 7.01317 11.8983 6.69261 11.2008 6.69261C10.8685 6.69261 10.7027 6.84455 10.7027 7.14739L10.6418 16.4704C10.6418 17.1788 10.6606 18.0052 10.7319 18.3666C10.8029 18.7285 10.9179 19.0229 11.0603 19.1981C11.2025 19.3729 11.367 19.5063 11.6383 19.5613C11.8908 19.6124 13.2732 19.7869 13.345 19.2676C13.4311 18.6452 13.4344 17.9721 14.1603 15.4616C15.2904 11.553 16.7638 9.646 17.4565 8.96873C17.5776 8.85036 17.7159 8.84329 17.7092 9.03704C17.6797 9.89395 17.5757 12.0352 17.5057 13.8543C17.318 18.7225 18.219 19.6248 19.5065 19.6248C20.4915 19.6248 21.88 18.6627 23.3684 16.2275C24.2964 14.7098 25.1974 13.2218 25.8447 12.1493C26.2958 12.5597 26.802 13.0015 27.3079 13.4735C28.4836 14.5703 28.8696 15.6125 28.6135 16.6012C28.4176 17.357 27.6799 18.136 26.367 17.3789C25.9844 17.158 25.8211 16.9874 25.4363 16.7383C25.2296 16.6046 24.914 16.5646 24.7247 16.7047C24.2332 17.069 23.9521 17.5324 23.7915 18.1061C23.6354 18.6643 24.2041 18.9594 24.7937 19.2175C25.3013 19.4396 26.3924 19.6409 27.0883 19.6638C29.7994 19.753 31.9713 18.3771 33.4832 14.828C33.7538 17.8931 34.9056 19.6275 36.9068 19.6275C38.2447 19.6275 39.5861 17.9276 40.1727 16.2553C40.3411 16.937 40.5904 17.5298 40.9123 18.0311C42.4543 20.4326 45.4457 19.9157 46.9484 17.8764C47.4129 17.2463 47.4836 17.0198 47.4836 17.0198C47.7028 18.9455 49.2804 19.6183 50.1836 19.6183C51.1952 19.6183 52.2397 19.1482 52.9718 17.5281C53.0576 17.7039 53.1512 17.8718 53.2535 18.031C54.7955 20.4326 57.7869 19.9157 59.2895 17.8764C59.3604 17.7807 59.4219 17.6939 59.4756 17.616L59.5197 18.8809C59.5197 18.8809 58.6625 19.6539 58.1363 20.128C55.8204 22.2166 54.0594 23.8012 53.9299 25.6465C53.7636 27.9993 55.7049 28.8738 57.1735 28.9884C58.7332 29.11 60.0689 28.2631 60.8898 27.0779C61.6119 26.0347 62.0846 23.7893 62.0499 21.5717C62.0361 20.6837 62.0133 19.5545 61.9954 18.3442C62.8094 17.415 63.7265 16.2407 64.571 14.866C65.4912 13.3679 66.4774 11.3561 66.9824 9.79048C66.9824 9.79048 67.8393 9.79771 68.7538 9.73887C69.0463 9.72011 69.1303 9.77878 69.0762 9.98957C69.0109 10.2442 67.9209 14.377 68.9157 17.1301C69.5966 19.0148 71.1316 19.6211 72.0417 19.6211C73.1071 19.6211 74.1262 18.8303 74.6724 17.6559C74.7382 17.7869 74.807 17.9135 74.8821 18.0305C76.4241 20.4321 79.405 19.9121 80.9181 17.8758C81.2597 17.4164 81.4534 17.0193 81.4534 17.0193C81.7782 19.0122 83.3548 19.6278 84.2579 19.6278C85.1986 19.6278 86.0914 19.2487 86.8158 17.564C86.846 18.3058 86.8936 18.9124 86.9689 19.1036C87.0148 19.2205 87.2821 19.3673 87.4766 19.4382C88.3371 19.7519 89.2148 19.6036 89.5395 19.5391C89.7645 19.4943 89.9399 19.3169 89.9638 18.8589C90.0269 17.6561 89.9882 15.6353 90.3591 14.1335C90.9818 11.613 91.5626 10.6353 91.8381 10.1513C91.9923 9.88013 92.1663 9.83539 92.1726 10.1224C92.1856 10.7031 92.215 12.4085 92.4562 14.6998C92.6333 16.3849 92.87 17.381 93.0519 17.6962C93.5709 18.5977 94.2119 18.6403 94.734 18.6403C95.066 18.6403 95.7604 18.5501 95.6983 17.9765C95.668 17.6969 95.7211 15.9688 96.335 13.4856C96.7358 11.8641 97.4042 10.3989 97.6452 9.86326C97.7341 9.66572 97.7754 9.82144 97.774 9.85177C97.7233 10.9685 97.6093 14.6212 98.0721 16.6189C98.6995 19.3252 100.514 19.628 101.147 19.628C102.497 19.628 103.601 18.6185 103.973 15.9621C104.063 15.3228 103.93 14.8292 103.533 14.8292"
                        fill="#262626" />
                </svg>
            </div>


            <div class="flex items-center">

                <!-- <div class="absolute">
                    <svg 
                    width="10"
                    height="10"
                    viewBox="0 0 10 10"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7.20833 5.58333H6.87917L6.7625 5.47083C7.17083 4.99583 7.41667 4.37917 7.41667 3.70833C7.41667 2.2125 6.20417 1 4.70833 1C3.2125 1 2 2.2125 2 3.70833C2 5.20417 3.2125 6.41667 4.70833 6.41667C5.37917 6.41667 5.99583 6.17083 6.47083 5.7625L6.58333 5.87917V6.20833L8.66667 8.2875L9.2875 7.66667L7.20833 5.58333V5.58333ZM4.70833 5.58333C3.67083 5.58333 2.83333 4.74583 2.83333 3.70833C2.83333 2.67083 3.67083 1.83333 4.70833 1.83333C5.74583 1.83333 6.58333 2.67083 6.58333 3.70833C6.58333 4.74583 5.74583 5.58333 4.70833 5.58333Z"
                        fill="#999999" />
                </svg>
                    <span >Search</span>
                </div> -->
                <input class="border border-gray-400 rounded text-xs py-1 px-2 w-48"
                    type="text"
                    placeholder="Search">

            </div>

            <div class="flex items-center">
                <svg class="mr-8 cursor-pointer"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M12 0.25C18.5 0.25 23.75 5.5 23.75 12C23.75 18.5 18.5 23.75 12 23.75C5.5 23.75 0.25 18.5 0.25 12C0.25 5.5 5.5 0.25 12 0.25ZM12 22.25C17.65 22.25 22.25 17.65 22.25 12C22.25 6.35 17.65 1.75 12 1.75C6.35 1.75 1.75 6.35 1.75 12C1.75 17.65 6.35 22.25 12 22.25ZM9.8 10.4C9.95 10.15 10.15 9.95 10.4 9.8L17.8 5.75C17.95 5.7 18.1 5.7 18.2 5.8C18.3 5.9 18.35 6.05 18.25 6.2L14.2 13.6C14.05 13.85 13.85 14.05 13.6 14.2L6.2 18.25C6.05 18.3 5.9 18.3 5.8 18.2C5.7 18.1 5.65 17.95 5.75 17.8L9.8 10.4V10.4ZM12.9 12.9L15.05 9L11.15 11.15L12.9 12.9Z"
                        fill="#262626" />
                </svg>

                <svg class="mr-8 cursor-pointer"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M17.15 1.75C13.6 1.75 12 4.4 12 4.4C12 4.4 10.4 1.75 6.85 1.75C3.2 1.75 0.25 4.95 0.25 8.9C0.25 12.85 3.3 15.1 6.35 17.8C10.95 21.9 11.25 22.25 12 22.25C12.75 22.25 13.05 21.9 17.65 17.8C20.75 15.05 23.75 12.8 23.75 8.9C23.75 4.95 20.8 1.75 17.15 1.75ZM16.65 16.65C13.95 19.05 12.5 20.4 12 20.7C11.5 20.35 9.7 18.75 7.35 16.65C4.6 14.2 1.75 12.15 1.75 8.85C1.75 5.75 4.05 3.2 6.85 3.2C8.9 3.2 10 4.2 10.8 5.3C12.6 7.85 11.4 7.85 13.2 5.3C14 4.2 15.1 3.2 17.15 3.2C19.95 3.2 22.25 5.75 22.25 8.85C22.25 12.2 19.4 14.25 16.65 16.65Z"
                        fill="#262626" />
                </svg>
                <svg class="cursor-pointer"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M12 13.5C8.45 13.5 5.55 10.6 5.55 7.05005C5.55 3.50005 8.45 0.550049 12 0.550049C15.55 0.550049 18.45 3.45005 18.45 7.00005C18.45 10.55 15.55 13.5 12 13.5ZM12 2.05005C9.25 2.05005 7.05 4.30005 7.05 7.00005C7.05 9.70005 9.25 12 12 12C14.75 12 16.95 9.75005 16.95 7.05005C16.95 4.35005 14.75 2.05005 12 2.05005V2.05005ZM22 23.4501C21.6 23.4501 21.25 23.1001 21.25 22.7001V21C21.25 18.5 19.25 16.5 16.75 16.5H7.25C4.75 16.5 2.75 18.5 2.75 21V22.7001C2.75 23.1001 2.4 23.4501 2 23.4501C1.6 23.4501 1.25 23.1001 1.25 22.7001V21C1.25 17.7 3.95 15 7.25 15H16.75C20.05 15 22.75 17.7 22.75 21V22.7001C22.75 23.1001 22.4 23.4501 22 23.4501Z"
                        fill="#262626" />
                </svg>

            </div>
        </div>

        <div class="flex mt-16 justify-center">
            <div class="flex-shrink-0 rounded-full overflow-hidden mr-24  self-start border border-gray-400 w-40 h-40 shadow-md">
                <img class="w-full h-full" src='https://images.unsplash.com/profile-1521046744800-65d6b18920eb?dpr=2&auto=format&fit=crop&w=150&h=150&q=60&crop=faces&bg=fff'
                    alt='' />
            </div>
            <div class="flex flex-col">
                <div class="flex items-center">
                    <span class="mr-5 text-3xl">_puzan_sakya_</span>
                    <button class="cursor-pointer mr-5 border border-gray-400 rounded text-sm py-1 px-2">Edit
                        Profile</button>
                    <svg class="cursor-pointer"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 4H4V20H20V4Z"
                            fill="#292929" />
                        <path d="M12 0.686293L0.68634 12L12 23.3137L23.3138 12L12 0.686293Z"
                            fill="#292929" />
                        <path
                            d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"
                            fill="white" />
                    </svg>
                </div>

                <div class="flex mt-6">
                    <span class="mr-1 font-semibold">62</span>
                    <p class="mr-10">posts</p>
                    <span class="mr-1 font-semibold">120</span>
                    <p class="mr-10">followers</p>
                    <span class="mr-1 font-semibold">393</span>
                    <p>following</p>
                </div>

                <span class="mt-6 mb-1 font-semibold">Shakyamuni Puzan</span>
                <span class="">I never lose, Either I win or I learn...😎😎😈
                    <br>
                    Meditation<br>
                    listens to Crywolf <br>
                    Scorpio</span>

            </div>
        </div>

        <!-- start tabs -->
        <div class="container mx-auto flex px-40 justify-center mt-10 border-t border-gray-200">
            <div class="flex items-center mr-16 cursor-pointer border-t border-gray-900 py-4"><svg
                    class="mr-2 -mt-px w-4"
                    viewBox="0 0 12 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10 1H2C1.45 1 1 1.45 1 2V10C1 10.55 1.45 11 2 11H10C10.55 11 11 10.55 11 10V2C11 1.45 10.55 1 10 1ZM4 10H2V8H4V10ZM4 7H2V5H4V7ZM4 4H2V2H4V4ZM7 10H5V8H7V10ZM7 7H5V5H7V7ZM7 4H5V2H7V4ZM10 10H8V8H10V10ZM10 7H8V5H10V7ZM10 4H8V2H10V4Z"
                        fill="#292929" />
                </svg>
                <span class="-mt-px font-semibold text-xs text-gray-900">POSTS</span>
            </div>
            <div class="flex items-center mr-16 cursor-pointer py-4 text-gray-500"><svg class="mr-2 w-4"
                    viewBox="0 0 12 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10.5 3H6.705L8.35 1.355L8 1L6 3L4 1L3.645 1.355L5.295 3H1.5C0.95 3 0.5 3.445 0.5 4V10C0.5 10.55 0.95 11 1.5 11H10.5C11.05 11 11.5 10.55 11.5 10V4C11.5 3.445 11.05 3 10.5 3ZM10.5 10H1.5V4H10.5V10ZM4.5 5V9L8 7L4.5 5Z"
                        fill="currentColor" />
                </svg>
                <span class="font-semibold text-xs">IGTV</span></div>
            <div class="flex items-center mr-16 cursor-pointer py-4 text-gray-500"><svg class="mr-2 w-4"
                    viewBox="0 0 12 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M7 2H2C1.45 2 1.005 2.45 1.005 3L1 11L4.5 9.5L8 11V3C8 2.45 7.55 2 7 2ZM7 9.5L4.5 8.41L2 9.5V3H7V9.5Z"
                        fill="currentColor" />
                </svg>
                <span class="font-semibold text-xs">SAVED</span></div>
            <div class="flex items-center mr-16 cursor-pointer py-4 text-gray-500"><svg class="mr-2 w-4"
                    viewBox="0 0 12 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M6 1C3.515 1 1.5 3.015 1.5 5.5C1.5 7.585 2.92 9.335 4.845 9.845L6 11L7.155 9.845C9.08 9.335 10.5 7.585 10.5 5.5C10.5 3.015 8.485 1 6 1ZM6 2C6.83 2 7.5 2.67 7.5 3.5C7.5 4.33 6.83 5 6 5C5.17 5 4.5 4.33 4.5 3.5C4.5 2.67 5.17 2 6 2ZM6 9.15C4.75 9.15 3.645 8.51 3 7.54C3.015 6.545 5 6 6 6C6.995 6 8.985 6.545 9 7.54C8.355 8.51 7.25 9.15 6 9.15Z"
                        fill="currentColor" />
                </svg>
                <span class="font-semibold text-xs">TAGGED</span></div>
        </div>

        <!-- start grid -->
        <div class="w-950 mx-auto">

            <div class="flex flex-wrap -ml-14">
                <div class="h-293 w-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576506542790-51244b486a6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576485375217-d6a95e34d043?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576478629989-424236e468b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576458617980-3a701688fa7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576459170018-2862aa40045b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576470995703-8cb7c5b1beda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576456075139-776f87df4617?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576460428852-d882ddd0099c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='http://unsplash.it/100?gravity=center'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576455051973-fb564daa7dc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576374780308-92c410cc03bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576378839505-9c61eb7b8bcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576326040797-6a0fd570ed72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1576447558637-f884403ea0d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
                <div class="w-293 h-293 overflow-hidden rounded m-14 cursor-pointer">
                    <img class="w-full h-full object-cover"
                        src='https://images.unsplash.com/photo-1433086966358-54859d0ed716?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'
                        alt='' />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

8. By Jaskiran Chhokar

Made by Jaskiran Chhokar. Instagram Post clone with Header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <title></title>
<style>
@import "reset"; 

body {
	background: #fafafa;
}

header {
	background: #fafafa;
	border-bottom: 1px solid #ccc;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index:20;
}

a {
	box-sizing: border-box;
	width: 24%;
	display: inline-block;
	margin-left: -3px;
	text-align: center;
	padding: 12px;
}

.fa  {
	color: #111;
	font-size: 25px;
}

.fa-heart-o:hover {
	color: red;
}

.container {
	background: #fafafa;
	padding-top: 50px;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 58px;
	bottom: 0;
	font-family: 'Open Sans', sans-serif;
}

.card {
	background: #fff;
	margin: 0 auto;
	width: 500px;
	height: 1000px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.card-header {
	padding: 15px;
}

.profile-img {
	display: inline-block;
	height: 45px;
	width: 45px;
	border-radius: 50%;
	position: relative;
	top: 5px;
	margin-right: 5px;
}


.profile-info {
	display: inline-block;
}

.name {
	font-size: 14px;
	color: #111;
	font-weight: 700;
}

.location {
	font-size: 12px;
	color: #111;
}

.time {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	float: right;
	display: inline-block;
	position: relative;
	top: 10px;
	right: 5px;
	color: grey;
	font-weight: 700;
}

.content {
	width: 100%;
	height: 670px;
}

.likes {
	font-weight: 700;
}

.card-footer {
	box-sizing: border-box;
	overflow: auto;
}

.footer-content {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	padding: 10px 15px 0 15px;
}

span {
	font-weight: 600;
}

.fa {
	font-size: 24px;
}
.fa-heart-o {
	display: inline-block;
	width: 10%;
}

.add-comment {
	display: inline-block;
	width: 60%;
}

input {
	font-family: 'Open Sans', sans-serif;
	display: inline-block;
	width: 100%;
	padding: 5px;
	font-size: 14px;
}

.fa-ellipsis-h {
	display: inline-block;
	width: 15%;
	color: grey;
	padding: 0 0 0 18px;
}
</style>
</head>
<body>
	<header>
		<a href="home.html"><i class="fa fa-home" aria-hidden="true"></i></a>
		<a href="search.html"><i class="fa fa-search" aria-hidden="true"></i></a>
		<a href="likes.html"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
		<a href="profile.html"><i class="fa fa-user-o" aria-hidden="true"></i></a>
	</header>

	<section class="container">
		<div class="card">
		<div class="card-header">
		<div class="profile-img">
			<img class="profile-img" src="https://i.pinimg.com/736x/a2/e1/8c/a2e18cbfbcaa8756fe5b40f472eeff45--profile-   picture-profile-pics.jpg"/>
		</div>
		<div class="profile-info">
			<div class="name">missy_elliot</div>
			<div class="location">New York, New York</div>
		</div>
		<div class="time">
			1hr
		</div>
		</div>
		<div class="content">
			<img src="https://images.unsplash.com/photo-1481824429379-07aa5e5b0739?dpr=1&auto=compress,format&fit=crop&w=342&h=&q=80&cs=tinysrgb&crop=" class="content" />
		</div>
		<div class="card-footer">
			<div class="footer-content">
				<span class="likes">241 likes</span>
					<p><span>missy_elliot</span> Currently starring in my own reality show titled, A Modern Cinderella; One Girl’s Search for Love and Shoe.</p>
					<p><span>gary_9198</span> Good Luck!! :D </p>	
					<p><span>samantha_george</span> Beautiful Picture β™₯ </p>
					<p><span>charlie.david</span> Heeyyy </p>
				<form class="form">
					<span class="heart"><i class="fa fa-heart-o" aria-hidden="true"></i></span>
					<span class="add-comment"><input type="text" placeholder="Add a comment..." /></span>
					<span class="options"><i class="fa fa-ellipsis-h"></i></span>
				</form>
			</div>
		</div>
	</div>
	</section>
</body>
</html>