JSFiddle - React, Tailwind, and code Playground

by zeze

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>

<form action="" id="fboardlist">

<ul id="sermonlist">
    <li class="sermoncontent">
    <div class="thumimg"><img class="vimeothumb" id="51670701" alt="제어하기 어려운 자들" ></div>
    <dl class="sermoncont">
        <dt>“ 제어하기 어려운 자들 ”</dt>
        <dd class="calendar">
        <strong>2012</strong>
        <div class="date">
            <div class="month">6</div>
            <div class="day">.14</div>
        </div>
        </dd>
        <dd class="preacher"> / 설교자 손웅석목사&nbsp;</dd>
        <dd class="sermonbible">사무엘하 3장 31~39절/ 베드로전서 1장 13~25절&nbsp;</dd>
<!--         <dd class="duration ">&nbsp;</dd> -->

    </dl>
    <ol class="sermonlink">
        <li class="watch mobilehide"><a class="video cboxElement" title="설교영상" href="../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13" onclick="_gaq.push(['_trackPageview', '../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13']);">설교영상</a></li>
        <li class="watchpop mobilehide"><a class="video cboxElement" title="새창으로 보기" href="../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13" onclick="_gaq.push(['_trackPageview', '../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13']);">새창으로 보기</a></li>
        <li class="listen"><a class="video cboxElement" title="설교음성" href="../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13" onclick="_gaq.push(['_trackPageview', '../skin/board/sermon/sermonview.php?bo_table=sundaymorning&amp;wr_id=13']);">설교음성</a></li>
    </ol>
    </li>

    <li class="sermoncontent">
    <div class="thumimg"><img class="vimeothumb" id="51291964" alt="제어하기 어려운 자들" ></div>
    <dl class="sermoncont">
        <dt>“ 제어하기...

CSS

form#fboardlist { width: 652px; margin: 0 auto; /* box-shadow: #000 0 0 3px; */ position: relative;}
#sermonlist { margin: 0; padding: 0; list-style: none}
#sermonlist li { margin: 0; padding: 0; list-style: none;}
#sermonlist .sermoncontent { overflow: hidden; display: block; position: relative;  padding:10px 0 10px 150px ; }
#sermonlist .sermoncontent {
  background: -webkit-radial-gradient(50% 140px, closest-corner, #000, #fff);

  }
.thumimg {
position: absolute;
display: block;
width: 130px;
height: 90px;
overflow: hidden;
top: 10px;
left: 3px;
border: solid 3px white;
box-shadow: 0 0px 5px #555;

}
img.vimeothumb {
top: -16%;
left: -9%;
position: absolute;
width: 160px;
}

#sermonlist dl.sermoncont { margin: 0; padding: 0;}
#sermonlist dl.sermoncont dt {margin: 0; padding: 0; border-bottom: dotted 1px #ddd; 
color: #ED5000;
font: 900 16px/30px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,'나눔고딕',NanumGothic,'돋움',Dotum,AppleGothic, sans-serif;
letter-spacing: -1px;
text-align: left;
padding-left: 20px;
}
#sermonlist dl.sermoncont dd {margin: 0; padding: 0; padding-left: 10px; line-height: 27px; 
color: #444;
font: 100 12px/25px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,'나눔고딕',NanumGothic,'돋움',Dotum,AppleGothic, sans-serif;


}

#sermonlist dl.sermoncont dd.calendar {
    position: absolute;
    display: block;
    margin: 0; padding: 0;
    width: 60px; 
    top:10px; right:0px;
    text-align:center;
    border-radius:10px 0;
    background: #cccccc;
    box-shadow: #000 0 0 4px;
    
}




#sermonlist dl.sermoncont dd.calendar strong {
display: block;
margin: 0;
border-radius: 9px 0 0 0 ;

color: white;
background:#999999;
text-align: center;
font:900 1em/15px "Lucida Sans", serif;
}

#sermonlist dl.sermoncont dd.calendar .date {position: relative; width: 60px; height: 40px; margin: 0; padding: 0; display: block;   overflow: hidden; }

#sermonlist dl.sermoncont dd.calendar .month,
#sermonlist dl.sermoncont dd.calendar .day {position:...

JavaScript

$(function(){ 
    $(".thumimg .vimeothumb").each(function(index){ 
    var vimeoVideoID = $(this).attr("id"); 
    $.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) { 
        $("#"+vimeoVideoID).attr('src', data[0].thumbnail_medium); 
        }); 
  
    }); 
});