JSFiddle - React, Tailwind, and code Playground
by Yura Stegny
HTML
<div id="wrapper" class="js-masonry"
data-masonry-options='{ "columnWidth": 0, "itemSelector": ".item", "isResizable": "true", "transitionDuration": 0 }'>
<div class="item"><div><a href="#">Русско-лезгинский словарь</a></div><div class="tag">Приложение</div><div class="comment">Задача приложения — сохранить вымирающие языки России.</div></div>
<div class="item"><div class="about">Помогу дизайном небольшому веб-сервису или сайту. В тестовом режиме возьмусь за мобильное приложение.</div></div>
<div class="item"><div><a href="#">Магазин самогона</a></div><div class="tag">Сайт-магазин</div><div class="comment">Тестовое задание на вакансию в Студию.</div></div>
<div class="item"><div><a href="#">Л Н К О М</a></div><div class="tag">Сайт-визитка</div><div class="comment">Ремонт и обслуживание оргтехники в Лангепасе.</div></div>
<div class="item"><div><a href="#">Конкурс от «Комуса»</a></div><div class="tag">Интернет-магазин</div><div class="comment">Сбор идей по улучшению сайта.</div></div>
<div class="item"><div><a href="#">Прогресс ИТ</a></div><div class="tag">Сайт-визитка</div><div class="comment">Продажа электроники компаниям.</div></div>
<div class="item"><div><a href="#">Книжный «Лайвлиб»</a></div><div class="tag">Сервис</div><div class="comment">Сообщество библиофилов.</div></div>
<div class="item"><div><a href="#">Сериальный «Майшоус»</a></div><div class="tag">Сервис</div><div class="comment">Учёт сериалов и общение с сериаломаньяками.</div></div>
<div class="item"><div><a href="#">Проза.кз</a></div><div class="tag">Сервис</div><div class="comment">Объединение прозаиков.</div></div>
</div>CSS
#wrapper {
width: 90vw;
max-width: 1100px;
margin: 0;
font-family: SourceSansPro-Regular;
font-size: 20px;
line-height: 30px;
}
.item {
width: 50%;
padding: 30px 50px 50px 50px;
margin: 0;
box-sizing: border-box;
box-shadow:
1px 0 0 0 #217BE5,
0 1px 0 0 #217BE5,
1px 1px 0 0 #217BE5,
1px 0 0 0 #217BE5 inset,
0 1px 0 0 #217BE5 inset;
}
.item a {
font-family: SourceSansPro-SemiBold;
font-size: 70px;
color: #217BE5;
line-height: 80px;
text-decoration: none;
border-bottom: 1px solid rgba(33, 123, 229, 0.2);
}
.tag {
margin: 30px 0 20px 0;
padding: 1px 13px 3px 13px;
background-color: #F2F2F2;
font-family: SourceSansPro-Regular;
font-size: 17px;
border-radius: 7px;
display:inline-block;
}
.about {
font-size: 27px;
line-height: 40px;
}JavaScript
!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return...