JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a class="title" href="http://stackoverflow.com/questions/5615523/best-practive-to-define-a-large-complicated-html-structure-as-a-link">Item 1</a>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
    </li>
    <!-- More ... -->
</ul>

CSS

li {
    display: block;
    width: 100%;
    height: 200px;
    border: 2px solid #999;
    position: relative; 
} li:hover { background: #ffa }

a.title {
    position: absolute;
    display: block;
    width: 100%;
    height: 200px;
    z-index: 999;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
} a.title:hover { }

div.description {
    position: absolute;
    padding: 10px;
    top: 60px;
}

p.subline {
    position: absolute;
    padding: 10px;
    top: 30px
}