JSFiddle - React, Tailwind, and code Playground

by Seokjun Hong

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div style="margin:10px;">


<div class="ui card">
  <div class="content">
    <a class="header">White Box</a>
    <p>
    소스코드에 대한 취약점을 분석할 수 있는 화이트박스 분석법입니다.
    </p>
    <div class="meta">
      <span class="date">Sep 2015</span>
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="users icon"></i>
      Label
    </a>
  </div>
</div>


<div class="ui card">
  <div class="content">
    <a class="header">Black Box</a>
    <p>
    바이너리 및 블루투스에 대한 취약점을 분석할 수 있는 분석법입니다.
    </p>
    <div class="meta">
      <span class="date">Sep 2015</span>
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="users icon"></i>
      Label
    </a>
  </div>
</div>


<div class="ui card">
  <div class="content">
    <a class="header">Network</a>
    <p>
    네트워크에 대한 취약점을 분석할 수 있는 분석법입니다.
    </p>
    <div class="meta">
      <span class="date">Sep 2015</span>
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="users icon"></i>
      Label
    </a>
  </div>
</div>


<div class="ui card">
  <div class="content">
    <a class="header">Source Scan</a>
    <p>
    재사용된 취약 코드가 존재하는지를 확인할 수 있는 분석법입니다.
    </p>
    <div class="meta">
      <span class="date">Sep 2015</span>
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="users icon"></i>
      Label
    </a>
  </div>
</div>

<div class="ui toggle checkbox">
  <input type="checkbox" name="public">
  <label>개발자 옵션 사용하기</label>
</div>

<div class="ui vertical menu">
  <a class="item">
    테스팅 선택
    <div class="ui label">BlackBox</div>
  </a>
  <a class="test ui red item">
    <div>
    사용자 유형
    </div>
    <!--div class="ui label">TechSavvy</div>-->
  </a>
  <a...

CSS

@keyframes blink {
to { background-color: rgba(255, 0, 0, .5); }
}
.test {
background-color:white;
animation: blink 1s steps(2, start) infinite;
}
.center {
  text-align:center !important;
}