JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <label data-tiltype="comment_stream" class="tiletyp transition" for="comment_stream">
        <input type="radio" id="comment_stream" value="comment_stream" name="apptype">
         <h1>Recent comments</h1>

        <p>Stream of comments made by everyone in the organisation</p>
    </label>
    <label data-tiletype="calendar" class="tiletype transition" for="calendar">
        <input type="radio" id="calendar" value="calendar" name="apptype">
         <h1>Calendar</h1>

        <p>Show any date-related data on a calendar and integrate with other calendaring systems</p>
    </label>
    <label data-tiletype="data_link" class="tiletype transition" for="data_link">
        <input type="radio" id="data_link" value="data_link" name="apptype"/>
         <h1>Little data tile</h1>

        <p>Search and edit a set of data</p>
    </label>
    <label data-tiletype="files" class="tiletype transition" for="files">
        <input type="radio" id="files" value="files" name="apptype">
         <h1>Files</h1>

        <p>Upload and present images and other files</p>
    </label>
    <label data-tiletype="visualisation" class="tiletype transition" for="visualisation">
        <input type="radio" id="visualisation" value="visualisation" name="apptype">
         <h1>Visualisation</h1>

        <p>Show visualisations like charts, maps or word clouds</p>
    </label>
    <input type="radio" id="chat" value="chat" name="apptype">
    <label data-tiletype="chat" class="tiletype transition" for="chat">
        
         <h1>Chat</h1>

        <p>View and post messages to other staff members</p>
    </label>
</div>

CSS

label {
    float: left;
    height: 5em;
    margin: 2em;
    width: 30em;
    display: block;
}

JavaScript

alert("registering label click");
$("label.tiletype").on('click', function (event) {
    event.stopPropagation(); // stop the .tile click being called
    alert("label clicked, x = " + event.pageX + ", y = " + event.pageY);
});