JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button type="button" class="buttona">
  not having read the links yet, my immediate comments- as i see it there are two main things that are sus about “veganism - and you touched on both:
</button>

<div class="messagera">
  <p class="li1"><img src="1.jpg">
    the relationship between veganism and expensive or otherwise
    exclusive “vegan foods” sold in stores</p>
  <p class="li2" style="width: 100%; float: right;">
  <img src="2a.jpg"/>
    The stigma on veganism is a cultural reaction to
    what was once perceived as a threat to society.
    now that stigma is a meme used by people
    entrenched in vegan culture to pose as
    oppressed heroic revolutionaries </p>
</div>
<form action="/">
  <input type="text" name="message" />
  <input class="message" type="submit" value="Send" />
</form>

CSS

connection {
  z-index: -1;
  border: 3px solid red;
  border-radius: 7em;
  color: black;
}


.buttona {
  color: #1D163E;
  background: white;
  font-size: 16px;
  font-family: sans-serif, "SEGOE-UI";
  text-align: left;
  border-radius: 43px;
  border: 2px solid #1D163E;
  padding: 20px;
  max-width: 400px;
  display: block;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.buttona:hover {
  border: 2px solid #7FFF00;
}

/* Style the collapsible content. Note: hidden by default */
.messagera {
  color: #1D163E;
  background: white;
  font-size: 16px;
  font-family: sans-serif, "SEGOE-UI";
  text-align: left;
  border-radius: 43px;
  padding: 20px;
  max-width: 400px;
  display: none;
  overflow: hidden;
  margin-left: 40px;
}

/* Collapsible content for lists */

p {
  color: #1D163E;
  background: white;
  font-size: 16px;
  font-family: sans-serif, "SEGOE-UI";
  text-align: left;
  padding: 5px;
  border-radius: 43px;
  border: 2px solid #1D163E;
  max-width: 150px;
  padding: 20px;
  width: 50%;
  float: left;
  overflow: hidden;
  display: inline-block;
}

img {
  width: 7%;
}

JavaScript

(function($) {
  $.fn.connections = function(options) {
    if (options === "update") {
      return processConnections(update, this);
    } else if (options === "remove") {
      return processConnections(destroy, this);
    } else {
      options = $.extend(
        true, {
          borderClasses: {},
          class: "connection",
          css: {},
          from: this,
          tag: "connection",
          to: this,
          within: ":root"
        },
        options
      );
      connect(options);
      return this;
    }
  };

  $.event.special.connections = {
    teardown: function(namespaces) {
      processConnections(destroy, $(this));
    }
  };

  var connect = function(options) {
    var borderClasses = options.borderClasses;
    var tag = options.tag;
    var end1 = $(options.from);
    var end2 = $(options.to);
    var within = $(options.within);
    delete options.borderClasses;
    delete options.tag;
    delete options.from;
    delete options.to;
    delete options.within;
    within.each(function() {
      var container = this;
      var done = new Array();
      end1.each(function() {
        var node = this;
        done.push(this);
        end2.not(done).each(function() {
          createConnection(
            container,
            [node, this],
            tag,
            borderClasses,
            options
          );
        });
      });
    });
  };

  var createConnection = function(
    container,
    nodes,
    tag,
    borderClasses,
    options
  ) {
    var css = $.extend({
      position: "absolute"
    }, options.css);
    var connection = $("<" + tag + "/>", options).css(css);
    connection.appendTo(container);

    var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
    var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;

    if (border_w <= 0 && border_h <= 0) {
      border_w = border_h = 1;
    }

    var data = {
      borderClasses: borderClasses,
      border_h:...