JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ul>
    <li>Именно из его применили. Текста на основе оригинального трактата благодаря. Текст-рыбу, широко используемый и т.д использующими латинский алфавит. Наиболее распространенных слов трактата, благодаря чему появляется. </li>
    <li><img alt="" src="http://kylefoster.me/rift/img/01.jpg" />Набор слов. том языке, который планируется использовать при оценке качества. Ему нести совсем необязательно генераторы, создающие собственные варианты текста сыграет на. </li>
    <li>Те или иные буквы встречаются с использованием lorem который планируется использовать при. </li>
    <li>Собственные варианты текста исключительно демонстрационная, то и на интернет-страницы.</li>
</ul>

CSS

ul {
    margin:0 0 0 -40px;
    width:100%;
    height:100%;
}
ul li {
    display:block;
    float:left;
    width:130px;
    margin:15px;
    border:1px solid #888;
    word-break: break-all;
    padding:5px;
}
img{
    width:100%;
}

JavaScript

var listli = $("li");

listli.hide();
listli.each(function(){
$(this).show('puff', 750, function(){ 
        $(this).animate({'opacity': 1,'bottom':0}); 
    });
});