JSFiddle - React, Tailwind, and code Playground

by Kritika PATTALAM BHARATHKUMAR

HTML

<div id="container">
            <div id="nav-bar">
                <div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a></div>
                <ul id="main-links">
                    <a href="about.html"><li><span class="word-position">About</span></li></a>
                    <a href="work.html"><li><span class="word-position">Work</span></li></a>
                    <a class href="contact.php"><li><span class="word-position">Contact</span></li></a>
                </ul>
            </div>
            <div id="main-content">
                <div id="pic-container">
                    <div id="relative">
                        <div id="photo-frame">
                            <div id="picture"></div>
                        </div>
                    </div>
                    <hr class="hidari" />
                    
                    
                    <hr class="migi" />
                </div>
                
                <h1 id="page-header">About Me</h1>
                <p id="intro">Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy Content! Dummy...

CSS

body {
    margin: 0;
}

#nav-bar {
  width: 100%;
  height: 50px;
  background-color: rgb(40, 40, 40);
  border-bottom-style: solid;
  border-bottom-color: rgb(238, 0, 0);
  border-bottom-width: 7.5px;
  padding-top: 14px
      
}
#expertise
{
  overflow:auto;
}

#logo {
    position: relative;
    bottom: 5px;
    font-size: 30px;
    padding-left: 8px;
    float: left;
    font-family: bebas;
}

#word-1 {
    color: rgb(0, 154, 205);
}

#word-2 {
    color: rgb(255, 250, 250);
}

ul#main-links {
  list-style: none;
  margin: 0;
  padding-right: 50px;
  float: right;
  height: 100%;
  border-bottom: 7.5px solid transparent;
  display: block;
font-size: 0;
}

ul#main-links li {
  display: inline-block;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
  color: white;
  font-family: arcon;
  font-size: 18px;
  height: 100%;
    width: 90px;
  position: relative;
  z-index: 2;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
    color: white;
}

a:active {
  text-decoration: none;
    color: white;
}

a#logo-link {
    text-decoration: none;
    
}

a#logo-link:visited {
  text-decoration: none;
    color: inherit;
}

a#logo-link:active {
  text-decoration: none;
    color: inherit;
}

ul#main-links > a > li > span.word-position {
  position: relative;
    top: 5px;
}

#main-content {
    background-color: rgb(131, 111, 255);
    width: 100%;
    height: 80%;
    
}

#background {
    
   
}

h1#page-header {
    margin: 0;
    font-family: code;
    font-size: 45px;
    text-align: center;
    padding: 5px 0px;
}

/* ABOUT */

#pic-container {
    width: 100%;
    height: 180px;
    text-align: center;
    padding-top: 10px;
}

#relative {
    position: relative;
    display: inline-block;
    right: 97.5px;
}

#photo-frame {
    background-color: royalblue;
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 100px;
    border-style: solid;
   ...

JavaScript

$(document).ready(function() {
                $("#main-links li").on('mouseenter', function() {

                    $(this).animate({borderBottomColor: "rgb(0, 154, 205)"},"200");
                });
                
               $("#main-links li").on('mouseleave', function() {

                    $(this).animate({borderBottomColor: "rgb(238, 0, 0)"},"200");
                });
                
                $("#picture").fadeOut();
                
                $("hr").delay(800).animate(
                    {
                        width: "50%"
                    }, 3200
                );
                
             
                
                $("#photo-frame").delay(4000).animate(
                    {
                        width: "180px",
                        height: "180px",
                        top: "-=90px",
                        left: "-=90px",
                        borderLeftWidth: "7.5px",
                        borderTopWidth: "7.5px",
                        borderRightWidth: "7.5px",
                        borderBottomWidth: "7.5px"
                    }, "slow", function() {
                       $("hr").animate(
                            {
                                width: "0%"
                            }, 2700
                         );
                        $("#picture").fadeIn(2000);
                    });
                

                
            });