JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
        <div class="row">
    <div class="col-xs-12 col-md-12 col-lg-8">
                
        <h2 class ="float-left" id="front_page">Medialog</h2>

</div>

 <div class="col-lg-12 col-md-12 col-sm-12 ">
<form id="input_form" action="update_data.php" method="POST">
    
     <div class="form-group ">
    
      <input class="form-control" id="item" value="Solo" name="item" placeholder="Solo" type="text"/>
     </div>
      <div class="form-group ">
     
 <select class="custom-select mr-sm-2" name="format" id="inlineFormCustomSelect" type="text">
        <option selected>Film</option>
        <option value="Film">Film</option>
        <option value="Book">Book</option>
        <option value="Podcast">Podcast</option>
        <option value="Music">Music</option>
        <option value="TV">TV</option>
      </select>

     
     </div>
     <div class="form-group ">
    
      <input class="form-control" id="source" name="source" value="Me" placeholder="Me" type="text"/>
     </div>
     <input type="hidden" id="id" name="id" value="22">
  
    <button class="btn btn-primary float-right" type="submit">Update</button>
    </form>
     <button class="btn btn-warning float-left" onclick="location.href='delete_record.php?id=22';">Delete</button>
   </div>
     </div>
     </div>
      &nbsp;
       &nbsp;
        &nbsp;
    <div class="container-fluid">
        
     <div class="row">
     <div class="col-lg-4 col-6">
     <div class="thumbnail">
     <a href="https://www.themoviedb.org/movie/518880">
     <img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2//67hdBNRmCeKYrEvBU5flH6aUt3G.jpg" class="img">
     </div>
     </div>
     <div...

CSS

h2{
        color: red;
    }
.form-control, .custom-select  {
  font-size: 20px
}
#mytable {
        font-size:20px !important;
      }
      img-center {
  text-align: center; 
  border-radius: 8px;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
  display: flex;
  margin: auto;
}
.img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid #F0F8FF;
}
img-fluid{
    border: 2px solid #F0F8FF;
    padding: 0;
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 350px;
    object-fit: cover;

JavaScript

<script
  src="https://code.jquery.com/jquery-3.7.1.slim.js"
  integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc="
  crossorigin="anonymous"></script>

<script>
    $('#front_page').on('click',function(){
    window.location = 'index.php';
  });
</script>

    </body>
</html>