JSFiddle - React, Tailwind, and code Playground

by jquery4u

HTML

<link rel="stylesheet" href="http://uat.splash.abc.net.au/splash-navigation-portlet/css/splash-m15-nav-portlet.css?browserId=other&amp;themeId=splashunderwater_WAR_splashunderwatertheme&amp;minifierType=css&amp;languageId=en_AU&amp;b=6120&amp;t=1366074913000">
<link rel="stylesheet" href="http://uat.splash.abc.net.au/splash-under-water-theme/css/under_water.css">
<link rel="stylesheet" href="http://uat.splash.abc.net.au/splash-under-water-theme/css/main.css?browserId=other&amp;themeId=splashunderwater_WAR_splashunderwatertheme&amp;minifierType=css&amp;languageId=en_AU&amp;b=6120&amp;t=1366075270000">
<div id="features"> <ul class="feature_wrapper"> <!-- container for english --> <li class="area_wrapper area_english"> <a href="http://splash.abc.net.au/secondary/english"><img src="http://splash.abc.net.au/splash-navigation-portlet/image/secondary/english_title.png" alt="english" title="English"></a> <div class="keywords_english"> <ul class="keyword_list"> <li> <a href="http://splash.abc.net.au/secondary/english?p_p_id=splashm20galleryportlet_WAR_splashgalleryportlet&amp;p_p_lifecycle=0&amp;p_p_state=normal&amp;p_p_mode=view&amp;p_p_col_id=row-1&amp;p_p_col_pos=1&amp;p_p_col_count=2&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_action=fixedkeyword&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_landingPage=secondary-english&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_keyword=English+language">English language</a> (17) </li> <li> <a href="http://splash.abc.net.au/secondary/english?p_p_id=splashm20galleryportlet_WAR_splashgalleryportlet&amp;p_p_lifecycle=0&amp;p_p_state=normal&amp;p_p_mode=view&amp;p_p_col_id=row-1&amp;p_p_col_pos=1&amp;p_p_col_count=2&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_action=fixedkeyword&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_landingPage=secondary-english&amp;_splashm20galleryportlet_WAR_splashgalleryportlet_keyword=Imaginative+texts">Imaginative texts</a> (4) </li> <li> <a...

CSS

.area_wrapper img {
    -webkit-transition:-webkit-transform 0.2s ease-in-out;
       -moz-transition:-moz-transform 0.2s ease-in-out;
            transition:transform 0.2s ease-in-out; 
}

.area_wrapper:hover img:not(.area) {
    cursor:pointer;
    -webkit-transform:scale(1.2) rotate(-15deg);
       -moz-transform:scale(1.2) rotate(-15deg);
            transform:scale(1.2) rotate(-15deg);   
}