JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <!--side-menu-->
  <div class="side_menu-all-area clearfix">
    <ul>
      <li class="side-logo"><a href="#"><img src="image/nav_logo.png" alt="サイドメニューのロゴ" class="side-menu-logosize"></a></li>
      <li class="side-midashi"><a href="#">ABOUT</a></li>
      <li class="side-midashi"><a href="#">MEMBER</a></li>
      <li class="side-midashi"><a href="#">PEOPLE</a></li>
      <li class="side-midashi"><a href="#">PROJECT</a></li>
      <li class="side-midashi"><a href="#">PRODUCT</a></li>
      <li class="contact-midashi"><a href="#"><i class="far fa-envelope"></i><span class="contact-text">CONTACT</span></a></li>
    </ul>
  </div>
  <!--/side-menu-->



  <div class="main-contents-right clearfix">
    <!--main-visual-->
    <img src="image/top_mainvisual01.jpg" alt="メインビジュアル" class="main-img">
    <!--/main-visual-->


    　　　　　　　　　　
    <!--contents-->
    <div class="contents-all-area">
      <ul class="contents-area">
        <li class="contents-list">
          <div>
            <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a>
          </div>

          <div>
            <p class="navy-midashi-text">テキストテキスト</p>
            <p class="midashi-text-2"><a href="#">テキストテキスト</a></p>

          </div>
        </li>
        <li class="contents-list">
          <div>
            <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a>
          </div>

          <div>
            <p class="navy-midashi-text">テキストテキスト</p>
            <p class="midashi-text-2"><a href="#">テキストテキスト</a></p>

          </div>
        </li>
        <li class="contents-list">
          <div>
            <a href=""><img src="image/IMG_" alt="画像1" class="contents-image-size"></a>
          </div>

          <div>
            <p class="navy-midashi-text">テキストテキスト</p>
            <p class="midashi-text-2"><a href="#">テキストテキスト</a></p>

          </div>
        </li>
        <li class="contents-list">
          <div>
           ...

CSS

.wrapper {
  width: 100%;
  padding-left: 250px;
  box-sizing: border-box;
}

.main-contents-right {
  float: right;
  width: 100%;
}

.side_menu-all-area {
  top: 0;
  left: 0;
  box-sizing: border-box;
  position: fixed;
  width: 250px;
  height: 100%;
  float: left;
  background-color: #f1f8f9;
  padding-left: 50px;
  padding-top: 50px;
  z-index: 4999;
}

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