JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://quote-job.com/column/wp-

content/uploads/2014/10/column_kyujin_head.gif" width="553" height="34" alt="おすす

め求人情報" id="column_kyujin_head"/>
<div id="column_kyujin">
<a href=""><span id="slide_left"><img src="http://quote-job.com/column/wp-

content/uploads/2014/10/column_kyujin_left.gif" id="slide_left_bt" width="15" 

height="15" /></span></a>
  <ul id="kyujin_ul">
    <li class="kyujin_list"> <img src="#" width="157" height="71" />
      <dl>
        <dt>店　名：</dt>
        <dd>ドリームメーカー</dd>
        <dt>エリア：</dt>
        <dd>東京都高輪1111</dd>
        <dt>業　種：</dt>
        <dd>プロダクション</dd>
      </dl>
    </li>
    <li class="kyujin_list"> <img src="#" width="157" height="71" />
      <dl>
        <dt>店　名：</dt>
        <dd>ドリームメーカー</dd>
        <dt>エリア：</dt>
        <dd>東京都高輪2222</dd>
        <dt>業　種：</dt>
        <dd>プロダクション</dd>
      </dl>
    </li>
    <li class="kyujin_list"> <img src="#" width="157" height="71" />
      <dl>
        <dt>店　名：</dt>
        <dd>ドリームメーカー</dd>
        <dt>エリア：</dt>
        <dd>東京都高輪3333</dd>
        <dt>業　種：</dt>
        <dd>プロダクション</dd>
      </dl>
    </li>
    <li class="kyujin_list"> <img src="#" width="157" height="71" />
      <dl>
        <dt>店　名：</dt>
        <dd>ドリームメーカー</dd>
        <dt>エリア：</dt>
        <dd>東京都高輪4444</dd>
        <dt>業　種：</dt>
        <dd>プロダクション</dd>
      </dl>
    </li>
    <li class="kyujin_list"> <img src="#" width="157" height="71" />
      <dl>
        <dt>店　名：</dt>
        <dd>ドリームメーカー</dd>
        <dt>エリア：</dt>
        <dd>東京都高輪5555</dd>
        <dt>業　種：</dt>
        <dd>プロダクション</dd>
      </dl>
    </li>
  </ul>
  <a href="#"><span id="slide_right"><img src="http://quote-job.com/column/wp-

content/uploads/2014/10/column_kyujin_right.gif" id="slide_right_bt" width="15" 

height="15" /></span></a>
</div>
<img src="http://quote-job.com/column/wp-

content/uploads/2014/10/column_kyujin_foot.gif" width="553" height="6" 

id="column_kyujin_foot"/>

CSS

div#column_kyujin {
width: 553px;
height: 149px;
margin: 0 auto 0;
background-color: #fbefd5;
border-left: 1px solid #E97B7C;
border-right: 1px solid #E97B7C;
box-sizing: border-box;
}
img#column_kyujin_head {
display: block;
margin: 25px auto 0;
}
img#column_kyujin_foot {
display: block;
margin: 0 auto;
}
span#slide_left , span#slide_right {
width: 18px;
height: 148px;
display: block;
background-color: #E87B7B;
border-radius: 4px;
float: left;
}
span#slide_right {
margin-left: 5px;
float: right;
}
span#slide_left {
}

img#slide_left_bt , img#slide_right_bt {
margin-top: 66px;
margin-left: 1px;
}
ul#kyujin_ul {
height: 149px;
width: 510px;
display: block;
overflow: hidden;
float: left;
}
li.kyujin_list {
width: 164px;
height: 146px;
background-color: #FFF;
font-size: 11px;
float: left;
margin-left: 4px;
border: 1px solid #CCC;
}
li.kyujin_list img {
margin: 3px;
}
li.kyujin_list dl{
margin-left: 13px;
margin-top: 5px;
}
li.kyujin_list dt{
width: 35px;
float: left;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {/*chrome*/
    li.kyujin_list dt {
        width: 36px;
    }
}
li.kyujin_list dd{
width: 110px;
float: left;
}

JavaScript

$('.kyujin_list').click(function() {
    var $t = $(this);
    $t.animate({
        left: '-100%'
    }, 10, function() {
        $t.css('left', '100%');
        $t.appendTo('#kyujin_ul');
    });

    $t.next().animate({
        left: '0%'
    }, 10);
});