JSFiddle - React, Tailwind, and code Playground

HTML

<!-- For best readability, expand HTML panel to max possiable size using jsFiddle dividers. -->
<!-- There are no console.log messages in this demo by arttronics -->
<!-- Complement Answer created for Stackoverflow Answer: http://stackoverflow.com/a/14059360/1195891  -->
<!-- See JavaScript Panel bottom section for "ABOUT THIS TUTORIAL" -->

<p>Previous Element on webpage <p/>



    
<div class="dynamicResults">

    <div class="dynamicThumb">
        <a href="#"><img src="http://directory.vancouver.wsu.edu/sites/directory.vancouver.wsu.edu/files/imagecache/aspectswitcher/profilepix/anthony.c.lopez/pic1.jpg" alt="" /></a>
    </div>

    <div class="dynamicInfo">
        <div class="dynamicText"><a href="#" class="dynamicName">Name</a></div>
        <div class="dynamicText">Position</div>
        <div class="dynamicText">Phone</div>
        <div class="dynamicText">Building <span>Room</span></div>
        <div class="dynamicText"><a href="#" class="dynamicEmail">Email</a><span class="dynamicEmailpic"></span></div>
    </div>

</div>

<div class="clear"></div>



    
<p>Next Element on webpage</p>
    

<div id="demo"></div>    


<!-- The above is the only statically rendered object for jsFiddle results panel.
    Adjust jsFiddle divider bars so that the above markup has tags at 1 per line for easy readbility.
    After the layout was made above, CSS styles were added in starting with basic rules to get the layout in order.
    The original website was referenced with Inspect Element to get pixel values and clues to duplicate layout here.
    
    The above static text for Name, Position, Phone, Building, Room, and Email will be changed with jQuery variables.
    Variables are also used for the hrefs above. The Name and Image will share same href while Email href is unique.
    The <br clear="both> is also part of the dynamically created webpage which prepares the area for the next element.
    To be sure, we are going to create a "template" for jQuery using...

CSS

/* To get started, look at the HTML Panel and make that as wide as possible. */

/* This body is just for jsFiddle Demo use */
body {
  margin: 20px;
  background:url("http://directory.vancouver.wsu.edu/sites/all/themes/departments/bkg_main.jpg") repeat-x;
}

/* The CSS shown below produces the same look from a particular website. It's used when jQuery creates new dynamic Objects that are added to the webpage. */

/* Original Webpage:

http://directory.vancouver.wsu.edu/anthropology

*/

.dynamicResults {
  float: left;
  width: 475px; /* The online webpage shows this width is used */
  border: 1px dashed red; /* Dev Use: To simulate Inspect Element for #views-row of original webpage  */
  /* Reminder: Since border is used, that effects the whole element by adding 2px of height. */ 
  /* To be sure, border must be removed so all px values calibrate correctly, or tweak CSS to include border. */
  margin-bottom: 24px; /* This is to allow next .dynamicResults object under current one have proper gap. */
}

.dynamicThumb { 
  /* Dev Use: Active style to view area of element */
  /* background-color: blue; */
  float: left;
  height: 105px; /* Calculated from CSS Selector below: Value is sum of thumb height and margin top/bottom */
  width: 130px;  /* Calculated from CSS Selector below: Value is the sum of thumb width and margin left/right */
}

.dynamicThumb a img {
  /* CSS "margin right" is used so text on right side of thumbnail doesn't touch that side of thumbnail. */
  margin: 5px 25px 0px 5px;  /* top right bottom left */
  width: 100px;  /* Width of thumbnail is specified. Also, 100px is native width. */
  height: 100px; /* Height of thumbnail is specified. Also, 100px is native height. */
}

.dynamicInfo {
  float: left;
  width: 345px; /* See below */
  /* If each text line, like Name (original website name Title) and Position, used only 1 single line, this width property  would not be required. When Name, Position, or any lines overflows unto the next line,...

JavaScript

// To do first: Use jsFiddle divider bars and expand HTML panel above to max possiable size.
// Then read the HTML comments to get started.
//
// To do second: Expand JavaScript panel as wide as possible using jsFiddle divider bars.

/* Ignore the styles in the CSS panel, as that's use to complement the HTML layout above since this tutorial will show how to convert the above HTML divs and anchors and spans into a dynamically created object. That is useful when you need to use a 'template' along with data-scraping or constuction of dynamic data from external file.

The first step I did was to eyeball the original website that had a particular look I wanted to duplicate. I got some paper and pencil and drew up boxs to represent thumbnail and text data while looking with Inspect Element to help see elements clearly and individually. My drawing is nothing more that a large mockup starting with a very large dashed rectangular from Inspect Element so I can position elements on paper correclty. Small details such as distance thumbnail from dashed top or location of multiline text helps in knowing how the page behaves. After looking at 2 or 3 very different thumbnails with various amounts of data, I then have enought to begin my html.

The first thing I created was the dashed rectangular object that mimics the Inspect Element from the orignal web page. That object is seen above as .dynamicResults and is the dashed red box in jsFiddle results pannel. This is my starting point. I used the same pixle values from the orignal webpage and once that box was made, I added in the thumbnail markup. To be sure, the red dashes is not part of the final goal, and is used only as a reference tool. During crital areas that I calculated positing, I turned that off at times, as it does effect the objects size.

With some CSS positioning rules to complement the HTML layout, I have my sections for the thumbnail and the text area named .dynamicThumb and .dynamicInfo. I used real text lables,...