JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<div id="modal-signup" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="border:0!important; box-shadow: none!important;">
      <div class="mod-signup-wrapper" >
        <div class="modal-header">
          <h3>Sign up a new account</h3>
        </div>
        <div class="modal-body">
          <div class="accordion">
            <div id="step-1">
             <a href="#step-1" class="tab">Step 1 - Information</a>
              <div class="content">
                <div style="background: #fff;">
                <form>
                    <input type="text" placeholder="Email Address" name="email">
                    <input type="text" placeholder="Password" name="password">
                    <input type="text" placeholder="Full Name" name="fullName">
                </form>
                </div>
              </div>
            </div>
            <div id="step-2">
              <a href="#step-2">Step 2 - Select</a>
              <div class="content">
                <div style="background: #fff;">
                skdjfhskfhskdfjksf
                  </div>
                </div>
                </div>
          </div>
        </div>
      </div>
    </div>

CSS

.accordion .tab {
  border-top: 1px solid #5b5b5b;
  display: block;
  height: 50px;
  text-decoration: none;
  color: #888;
}

.accordion .tab:hover,
.accordion div:target .tab {
  color: #000;
  border-top: 1px solid #7c7c7c;
}

.accordion div .content {
  display: none;
}

.accordion div:target .content {
  display: block;
}

.accordion > div {
  height: 50px;
  overflow: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.accordion > div:target {
  height: 400px;
}