nextjs-tailwindcss-instagram-card.js

// create an Instagram Card with Tailwind CSS and Font Awesome Icons

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart, faComment, faPaperPlane, faBookmark } from '@fortawesome/free-regular-svg-icons'
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'

function InstaCard() {
  return (
    <div className="pt-20 min-h-screen">
      <div className="w-full bg-white max-w-lg shadow-sm sm:my-4 sm:rounded-sm mx-auto">
        <div className="h-16 w-full flex items-center justify-between px-4">
          <div className="flex items-center space-x-2">
            <img
              src="https://avatars.githubusercontent.com/u/10962432?v=4"
              alt="profile-avatar"
              className="rounded-full object-cover w-5 h-5"
            />
            <span>bilal</span>
          </div>
          <FontAwesomeIcon icon={faEllipsisH} className="w-5" />
        </div>
        <img
          src="https://res.cloudinary.com/dtubie55e/image/upload/v1618101862/nerdogram/sk0sdyy1iv88ldtdarbz.jpg"
          alt="card-preview"
          className="h-96 w-full"
        />
        <div className="px-4 py-2">
          <div className="flex justify-between items-center h-10">
            <div className="flex space-x-4">
              <FontAwesomeIcon icon={faHeart} className="w-6 h-6" />
              <FontAwesomeIcon icon={faComment} className="w-6 h-6" />
              <FontAwesomeIcon icon={faPaperPlane} className="w-6 h-6" />
            </div>
            <FontAwesomeIcon icon={faBookmark} className="w-5 h-6" />
          </div>
          <div className="py-2">
            Anim sit sint officia consequat labore nulla amet laborum incididunt do. Lorem ipsum nostrud eu do sunt ipsum ad consequat.
          </div>
        </div>
      </div>
    </div>
  )
}

export default InstaCard