JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <div class="inner">
    <div class="sidebar">
      <div class="fixed">
        <p>test</p>
      </div>
    </div>
    <ul class="list">
      <li>dfdsf</li>
      <li>dfdsf</li>
      <li>dfdsf</li>
      <li>dfdsf</li>
      <li>dfdsf</li>
      
    </ul>
    
  </div>
  
</div>

CSS

.wrap {height: 3000px}
/* .inner {position:relative;margin: auto; width: 800px;border:1px solid pink;} */
/* .list {border:1px solid red;float:left;width:530px;} */
/* .list li {height:30px;border:1px solid green;} */
/* .sidebar {width:250px;border:1px solid #000;float:right;} */
.fixed {
 position: sticky;
  color: white;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: #2b2929;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3)