JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Inspi.</title>
        <link rel ="icon" href="https://gcdnb.pbrd.co/images/qu6GMS2e9SYs.png?o=1"/>
        <link rel = "stylesheet" href="inspiMemories.css">
        <script src = "inspiMemories.js"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    </head>
    <body>
        <nav class="nav"> 
            <a class="bar_a" id="bar_a1" aria-current="page" target='_self' href="inspi.html">部落格</a>
            <a class="bar_a" id="bar_a2" aria-current="page" target='_self' href="inspiTeach.html">教學區</a>
            <a class="bar_a" id="bar_a3" aria-current="page" target='_self' href="inspiService.html">服務</a>
            <a class="bar_a" id="bar_a4" aria-current="page" target='_self' href="aboutInspi.html">關於Inspi.</a>
            <a class="bar_a" id="bar_a5" aria-current="page" target='_self' href="inspiMemories.html">舊文回憶錄</a>
          </div>
      </nav>
      


      <div class="link"><a href="https://www.facebook.com/Inspiler/posts/147175587596715" class="tellLink" id="tell20210827">公告：即日起本網站不會再發布手機相關的資訊....     2021.08.27</a></div>
      <div class="link"><a href="https://www.facebook.com/Inspiler/posts/146462627668011" class="blogLink" id="blog20210826-1">神人成功將Linux裝在Mac系統:D     2021.08.26</a></div>
      <div class="link"><a href="https://www.facebook.com/Inspiler/posts/146365787677695" class="blogLink" id="blog20210826">舊iPhone跑太慢？將地區換到這國竟能提升效能ö     2021.08.26</a></div>
      </div>
    </body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}





/***WhenItLoadingh***/
.loading{
  cursor: wait;
}




/***操作區***/
img{
  user-select: none;
  -webkit-user-drag: none;
}
.nav {
  background: rgb(120, 155, 103);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-user-drag: none;
  height: 16vh;
  padding: 10px 10px;
  /* position: fixed;
  top: 0;
  right: 0;
  left: 0; */
}
.bar_a {
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  /* font-size: 19px; */
  /* margin: 0 24px; */
  font-size: 30px;
  padding: 9px 10px;
  border: 8px solid transparent;
  border-radius: 32px;
  transition: .13s;
  /* position: relative; */
  /* left: 5%; */
  user-select: none;
  -webkit-user-drag: none;
}
.bar_a#bar_a5 {
  border: 8px solid rgb(156, 197, 138);
  
}
.bar_a:hover {
  border-color: rgb(133, 172, 117);
}
.link {
  display:flex;
  margin: 40px 16px 0;
}
.blogLink{
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode',...