JSFiddle - React, Tailwind, and code Playground

by Hao Wu

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="panel-body">
    <form id="attendForm" class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-3 col-xs-3 control-label"></label>
        <label class="btn btn-success active attend_opt_btn_i">
          <input type="radio" name="attend_option" id="option1" value="I" autocomplete="off" checked /> 簽到
        </label>
        <label class="btn btn-danger attend_opt_btn_o">
          <input type="radio" name="attend_option" id="option2" value="O" autocomplete="off" /> 簽退
        </label>
<!--       </div>
      <div class="form-group"> 
        <label class="col-sm-3 col-xs-3 control-label"></label> -->
        <textarea id="clock" class="clock_custom">105-01-12 09:36:55</textarea>
      </div>
    </form>
  </div>
  <div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>

CSS

#option1:checked .clock_custom {
	color: #30812C; 
}

#option1:checked ~ #clock {
	color: #30812C; 
}