JSFiddle - React, Tailwind, and code Playground

by hart1994

HTML

<script src="https://github.com/Wolfy87/Spark/raw/master/spark.js"></script>
<script src="https://github.com/Wolfy87/Spark/raw/master/plugins/spark.twitter.js"></script>
<div class='tweet'>
    <p class='user'></p>
    <p class='content'></p>
    
    <br>
    <p class='info'></p>
    <p class='help'></p>
    <br>
    <input type='text' class='username' />
    <a href='#' class='yes'>Yes</a>
</div>

CSS

div.tweet {
    width:50%;
    height: 200px;
    margin: 0 auto;
    background-color: #CCCCCC;
    padding: 30px;
    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    
    -webkit-box-shadow: 0 0 5px #000000;
    -moz-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
    text-align: center;
    }
    div.tweet p {
        font-family: helvetica, arial, sans-serif;
        color: #333333;
        display: inline;
    
    }
    div.tweet p.user {
        font-weight: bold;
    }
div.tweet p.info{
    
   margin: 0 auto; 
}
div.tweet input.username{
  width:100%; 
}

JavaScript

$('div.tweet p.user').opacity(0);
$('div.tweet p.content').opacity(0);
$('div.tweet p.info').content('Twitter name?');
$('div.tweet a.yes').event('click', function(e) {
    
    
var name = $('div.tweet input').attribute().value;//get data from input
var user = "'s Latest Tweet:";//part of the user
    
    $('p.user').content(name + user);//set the p tag
    $('div.tweet p.content').twitter(name);//twitter the username
    $('div.tweet input.username').opacity(0);//hide the field
    $('div.tweet p.info').opacity(0);//hide the info
    $('div.tweet a.yes').opacity(0);//hide the info
        
        
        $('div.tweet').opacity(100, 1000, function() {//fadein the div
            $('div.tweet p.user').opacity(100, 1000, function() {//fadein the user
                $('div.tweet p.content').opacity(100, 1000);//tweet content fadein
                $('div.tweet p.help').opacity(100, 1000);//fadein the info
                $('div.tweet p.help').content('<br>Click to refresh, or double click to search again.');//info content
                 
        
    });//p.user
});//div.tweet
  
    
 

});//keypress



$('div.tweet p.content').event('click', function(e){
    $('div.tweet p.content').opacity(0, 1000, function() {
        $('div.tweet p.content').twitter(name);//twitter the username
        $('div.tweet p.content').opacity(100, 1200);//tweet content fadein
    });
    
    
});//div.tweet - event.click





// Hide em
/*
$('div.tweet').opacity(0);
$('div.tweet p.user').opacity(0);
$('div.tweet p.content').opacity(0);

// Load the tweet
//$('div.tweet p.content').twitter('OliverCaldwell');

// Show em
/*
$('div.tweet').opacity(100, 1000, function() {
    $('div.tweet p.user').opacity(100, 1000, function() {
        $('div.tweet p.content').opacity(100, 1000);
    });
});*/

// Reload it if it is clicked
/*
$('div.tweet').event('click', function(e) {
    // Fade them all out
    $('div.tweet p.content').opacity(0, 1000, function() {
        $('div.tweet...