Quay lại

Yêu cầu

Bootraps 4.5 Jquery

Responsive cards (1 / 2 / 3 cols); card footer; css flex properties for equal heights. Unsplash photos.

My heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Twitter

My much longer heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, tempore sapiente eveniet quibusdam ab ea, quaerat placeat numquam aspernatur, accusamus magnam neque.

Twitter

My heading

Shorter text.

Twitter

My heading

Shorter text.

Twitter

My heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, tempore sapiente eveniet quibusdam ab ea, quaerat placeat numquam aspernatur, accusamus magnam neque.

Twitter

My heading

Longer content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, tempore sapiente eveniet quibusdam ab ea, quaerat placeat numquam aspernatur, accusamus magnam neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, tempore sapiente eveniet quibusdam ab ea, quaerat placeat numquam aspernatur, accusamus magnam neque.

Twitter 
...
<div class="bg-white rounded-lg shadow-lg overflow-hidden flex-1 flex flex-col">
      <div class="bg-cover h-48" style="background-image: url(https://images.unsplash.com/photo-1511084901824-1c57f5a16c98?w=900);"></div>
      <div class="p-4 flex-1 flex flex-col" style="
">
        <h3 class="mb-4 text-2xl">My heading</h3>
        <div class="mb-4 text-grey-darker text-sm flex-1">
          <p>Shorter text.</p>
        </div>
        <a href="#" class="border-t border-grey-light pt-2 text-xs text-grey hover:text-red uppercase no-underline tracking-wide" style="
">Twitter</a>
      </div>
    </div>  
...
<style>
</style>  

<script>
</script>