JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<div class="infowindow-background">
    <div class="infowindow-body">
        <div class="swiper-container" id="carousel">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">
                    
                    <div class="img-wrapper">
                        <div>
                            <a href="{{eventProfileUrl}}">
                                <img src='{{eventProfileImageUrl}}' />
                            </a>
                        </div>
                        
                        <a href="http://dev.gms.gigmaps.com/gigmap" target="_blank">
                            <svg src="{{baseUrl}}/public/assets/images/m_linkbutton_TICKETS_S.svg" class="btn-left ticketBtn" data-svg_class="ticket-button" />
                        </a>
                        <a href="http://dev.gms.gigmaps.com/gigmap" target="_blank">
                            <svg src="{{baseUrl}}/public/assets/images/m_linkbutton_WISHLIST.svg" class="btn-right wishBtn" data-svg_class="event-button-stroke" />
                        </a>
                        <a href="http://dev.gms.gigmaps.com/gigmap" target="_blank">
                            <svg src="{{baseUrl}}/public/assets/images/m_linkbutton_ATTEND.svg" class="btn-right attendBtn" data-svg_class="event-button" />
                        </a>
                    </div>
                    
                    <div class="content-wrapper">
                        <div class="date">2015-10-20 21:30</div>
                        <div class="close-infowindow">
                            <a href="http://dev.gms.gigmaps.com/gigmap">
                                <svg src="{{baseUrl}}/public/assets/images/icon_cross.svg" />
                            </a>
                        </div>
                        <div class="event">
                             <a href="{{eventProfileUrl}}" class="event_link">My Cool Event xxx wwww Mqqqq ssss</a>
                        </div>
             ...

CSS

body {font-family:sans-serif; color:white; margin:0;}
a {text-decoration:none;}
img {border:0;}
img {border-style:none; margin:0; padding:0;}
ul, li, ol, dl, dt, dd {padding:0; margin:0; list-style:none;}

.member_link{color:#f26522;text-transform: none;}
.artist_link{color:#009dde;text-transform: none;}
.event_link{color:#ffe800 !important;text-transform: none;}
.venue_link{color:#e42e87 !important;text-transform: none;}
/* Delete above - already in style.css */


/* Infowindow structure */
		.infowindow-background {
		    background: rgba(0, 0, 0, 0.1);
            width: 420px;
		    height: 200px;
		    overflow: hidden;
		}
		.infowindow-body {
		    background: rgba(0, 0, 0, 0.8);
		    height: 158px;
		    padding: 6px;
		}
		.infowindow-footer {
		    height: 30px;
		}

/* Footer with swipe controls and pointer */
		.infowindow-footer .nav {
		    width: 137px;
		    height: 26px;
		    margin: 4px 0 0 0;
		    background: rgba(0, 0, 0, 0.3);
		}
		.infowindow-footer .nav.left {
		    float: left;
		}
		.infowindow-footer .nav.right {
		    float: right;
		}
		.infowindow-footer .nav.left svg, .infowindow-footer .nav.right svg {
            width: 26px;
            height: 26px;
        }
		.map-pointer-wrap {
		    width: 60px;
		    height: 30px;
		    margin: auto;
		}
		.map-pointer:after {
		    content:"";
		    display: block;
		    border-left: 30px solid transparent;
		    border-right: 30px solid transparent;
		    border-top: 30px solid rgba(0, 0, 0, 0.8);
		}

/* Main section - profile pic and buttons */
		.swiper-slide .img-wrapper {
		    float: left;
		}
		.swiper-slide .content-wrapper {
		    overflow: hidden;
            padding-left: 6px;
		}
		.swiper-slide img {
		    height: 128px;
		    width: 130px;
            margin-bottom:6px;
		}
		.swiper-slide .btn-left {
		    width: 25px;
		    height: 25px;
		    float: left;
            background: #666;
		}
		.swiper-slide .btn-right {
		    width: 25px;
		    height: 25px;
		    float:...