JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="cvpress">
<span class="cvtitle">2016 |</span>
<br>
<a href="/updates/2016/5/22/feature-in-die-angst-magazine-no2">Die Angst Magazine</a>
<br>
<a href="/updates/2016/5/22/noisy-paint-box-exhibition-feature-in-the-wave-newspaper">'The Wave' Newspaper</a>
<br>
<a href="/updates/2016/5/22/european-photography-98-feature-of-dear-artist-we-regret-to-tell-you">European Photography #98</a>
<br>
<a href="/updates/2016/5/24/featured-in-common-ground-journal-magazine">Common Ground issue 5</a>
<br>
<a href="/updates/2016/5/22/incandescent-no-9-feature-of-color-nights">Incandescent Issue 9</a>
<br> Phose Magazine
<br> Tika Arts
<br> Visual Opinion Magazine
<br>
<span class="cvtitle">2015 |</span>
<br> Glamour
<br> The Week - Photo Blog
<br> This very instant
<br> austere magazine
<br> Magnet
<br> Strant Magazine
<br> Don't Take Pictures - at home
<br> Saatchi Art Blog
<br> Splash & Grab
<br> Trip
<br> Amadeus Magazine
<br> Portfolio blog
<br> <a href="/updates/2016/5/24/cache-in-fisheye-magazine-online">Fish Eye</a>
<br> SVA website
<br> broad Strokes - Art Fix
<br> <a href="/updates/2016/5/23/nyip-interview-about-dear-artist-we-regret-to-tell-you">NYIP Blog</a>
<br> <a href="/updates/2016/5/22/hyperallergic-feature-dear-artist-we-regret-to-tell-you">Hyperallergic</a>
<br> <a href="/updates/2016/5/22/featureshoot-feature-dear-artist-we-regret-to-tell-you">FeatureShoot</a>
<br> <a href="/updates/2016/5/22/dead-water-in-its-nice-that-blog">It's Nice That</a>
<br> <a href="/updates/2016/5/23/petapixle-on-dear-artist-book">PetaPixel</a>
<br> S Moda
<br> <a href="/updates/2016/5/23/co-design-photo-essay-about-dead-water-project">Fast Co. Design</a>
...
CSS
.cvtitle {
font-weight: 400;
text-transform: uppercase
}
#cvpress {
-webkit-columns: 4 250px;
-moz-columns: 4 250px;
columns: 4 250px;
-webkit-column-gap: 20px;
/* Chrome, Safari, Opera */
-moz-column-gap: 20px;
/* Firefox */
column-gap: 20px;
}
#cvexhibitions {
-webkit-columns: 2 400px;
-moz-columns: 2 400px;
columns: 2 400px;
-webkit-column-gap: 20px;
/* Chrome, Safari, Opera */
-moz-column-gap: 20px;
/* Firefox */
column-gap: 20px;
}
.twocolumns {
-webkit-columns: 2 400px;
-moz-columns: 2 400px;
columns: 2 400px;
-webkit-column-gap: 20px;
/* Chrome, Safari, Opera */
-moz-column-gap: 20px;
/* Firefox */
column-gap: 20px;
}
#cvpress a {
display: inline-block;
transform: translatex(0px);
transition: all 0.3s ease-in-out;
}
#cvpress a:hover {
color: #97cacc;
transform: translatex(5px);
transition: all 0.3s ease-in-out;
}