JSFiddle - React, Tailwind, and code Playground

by Beardy

HTML

<div class="" data-page_id="1" id="section-portfolio">
  <article class="project state-collapsed" data-work_slug="slated" data-work_name="Slated" data-work_id="2" id="portfolio_work_2">
    <div class="project-content xFull" style="padding-top: 50px;">
      <div class="xNarr lorem">
        <header>
          <h1>Slated</h1>
        </header>
        <section>
          <p><!-- cinema display --> 
          </p>
          <div data-ratio="0.843" class="frame frame-cinemadisplay media-holder managed">
            <div class="device"> <img alt="" src="http://typecode.com/static/img/deviceframe/cinemadisplay-wide.png"> </div>
            <div class="behind-device"> <img alt="" src="http://typecode.com/static/img/deviceframe/cinemadisplay-wide-bg.png"> </div>
            <div class="mock"> <img alt="" src="http://typecode.com/static/uploads/work/WorkMedia/file/home.png" class="portfolio-image"> </div>
          </div>
          <p></p>
          <p>Launched in 2011, Slated is the next generation online marketplace for investing in film. For investors &amp; industry professionals, Slated provides exclusive access to a socially-vetted marketplace of high-quality films and filmmakers. Slated makes it easy to track a film’s progress, to follow trusted people and their portfolios, and to receive targeted updates that will help them find their next great film. 
            <!-- browser chrome, simple (just the title) --> 
            
          </p>
          <div class="frame frame-chrome-simple media-holder managed">
            <div class="headerbar"> <span class="title">Films - The Way Way Back</span> </div>
            <div class="mock"> <img alt="" data-src="/static/uploads/work/WorkMedia/file/film-waywayback.png" src="/static/uploads/work/WorkMedia/file/film-waywayback.png" class="portfolio-image"> </div>
          </div>
          <p></p>
          <p>For filmmakers, Slated provides a level of validation for their projects and a platform to promote their films to...

CSS

.project {
    overflow: hidden;
    position: relative;
}

.project .project-shadow {
    background-image: url("http://typecode.com/static/css/../img/project_shadow.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    bottom: 0;
    height: 25px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 102;
}

.project.state-collapsed {
    height: 250px;
}
.project .state-collapsed:hover{
    background-color:#f9f9f9;
    cursor:pointer;
}

JavaScript

$('article').click(function(){
    $(this).toggleClass('state-collapsed');
    $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});