JSFiddle - React, Tailwind, and code Playground

by ayana tech

HTML

<body>

   <div class="container">
           <p id="p1">

<a href='http://ayanatech.blogspot.com' target="_blank">مرر الماوس للمعاينه</a></p>
    
<center>

</center>
<div class='clear'/>    
    </div>
</body>

CSS

body {
background: #eee url(http://4.bp.blogspot.com/-slIpCw8me28/VFTDpK5VZOI/AAAAAAAAGkg/1zr5U-PKryM/s1600/Fly%2BAr1web.png) 50% 0 no-repeat;
}
h3 {
font-size: 20px;
font-weight: 400;
    font-family:ge_dinar_tworegular;
text-align: center;
padding: 15px;
margin: 15px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 200px;
box-shadow: 0 0 3px #e5e5e5;
transition: all 0.5s ease-in-out;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
 background: #DA4444; transition: all 0.5s ease-in-out;  
}
@font-face {
    font-family: 'ge_ss_tvbold';
    src: url('ge_ss_tv_bold-webfont.eot');
    }

@font-face {
    font-family: 'ge_ss_tvbold';
    src:...

JavaScript

//<![CDATA[
$(function() {
  $('#p1 a').miniPreview({ prefetch: 'pageload' });
  $('#p2 a').miniPreview({ prefetch: 'parenthover' });
  $('#p3 a').miniPreview({ prefetch: 'none' });
});

(function($) {
  var PREFIX = 'link-preview';
  
  $.fn.miniPreview = function(options) {
    return this.each(function() {
      var $this = $(this);
      var miniPreview = $this.data(PREFIX);
      if (miniPreview) {
        miniPreview.destroy();
      }

      miniPreview = new MiniPreview($this, options);
      miniPreview.generate();
      $this.data(PREFIX, miniPreview);
    });
  };
  
  var MiniPreview = function($el, options) {
    this.$el = $el;
    this.options = $.extend({}, this.defaultOptions, options);
    this.counter = MiniPreview.prototype.sharedCounter++;
  };
  
  MiniPreview.prototype = {
    sharedCounter: 0,
    
    defaultOptions: {
      width: 256,
      height: 144,
      scale: .25,
      prefetch: 'pageload'
    },
        
    generate: function() {
      this.createElements();
      this.setPrefetch();
    },

    createElements: function() {
      var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
      var $loading = $('<div>', { class: PREFIX + '-loading' });
      var $frame = $('<iframe>', { class: PREFIX + '-frame' });
      var $cover = $('<div>', { class: PREFIX + '-cover' });
      $wrapper.appendTo(this.$el).append($loading, $frame, $cover);
      
      $wrapper.css({
        width: this.options.width + 'px',
        height: this.options.height + 'px'
      });
      
      var inversePercent = 100 / this.options.scale;
      $frame.css({
        width: inversePercent + '%',
        height: inversePercent + '%',
        transform: 'scale(' + this.options.scale + ')'
      });

      var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
      var top = (this.$el.height() + fontSize) / 2;
      var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
      $wrapper.css({
        left: left + 'px'
      });
 ...