JSFiddle - React, Tailwind, and code Playground

HTML

<input class="textArea__Create" type="file" name="img_1" placeholder="image 1"  accept= ".jpg, .jpeg .png" value="" /> 
      
            



            <input class="textArea__Create" type="file" name="img_2" placeholder="image 2" accept= ".jpg, .jpeg .png"  value="" /> 
   
              



            <input class="textArea__Create" type="file" name="img_3" placeholder="image 3" accept= ".jpg, .jpeg .png"  value="" />  
   
            


            <input class="textArea__Create" type="file" name="img_4" placeholder="image 4" accept= ".jpg, .jpeg .png"  value="" /> 



            <input class="textArea__Create" type="file" name="img_5" placeholder="image 5" accept= ".jpg, .jpeg .png"  value="" />

CSS

.text-warning__Create{
    color: #fb8500;
}


.is-valid_create {
  border: #15b800 1.5px solid
}

.is-invalid_create {
    border: red 1.5px solid
}

JavaScript

window.onload = function(){
   

    let form = document.querySelector('.form')
        form.title.focus()

    form.addEventListener('submit', (e)=>{ 
        e.preventDefault()

    let errors =[]

    let img_1 = document.querySelector('[name="img_1"]')
    let img_2 = document.querySelector('[name="img_2"]')
    let img_3 = document.querySelector('[name="img_3"]')
    let img_4= document.querySelector('[name="img_4"]')
    let img_5= document.querySelector('[name="img_5"]')

    let title = document.querySelector('[name="title"]')
    let one_word_descr = document.querySelector('[name="one_word_descr"]')
    let short_descr = document.querySelector('[name="short_descr"]')
    let long_descr = document.querySelector('[name="long_descr"]')
    let game_group = document.querySelector('[name="game_group"]')
    let video_1 = document.querySelector('[name="video_1"]')
    let category = document.querySelector('[name="category"]')
    let launch_date = document.querySelector('[name="launch_date"]')
    let platform = document.querySelector('[name="platform"]')
    let os_min = document.querySelector('[name="os_min"]')
    let os_rec = document.querySelector('[name="os_rec"]')
    let processor_min = document.querySelector('[name="processor_min"]')
    let processor_rec = document.querySelector('[name="processor_rec"]')
    let storage_min = document.querySelector('[name="storage_min"]')
    let storage_rec = document.querySelector('[name="storage_rec"]')
    let graphics_min = document.querySelector('[name="graphics_min"]')
    let graphics_rec = document.querySelector('[name="graphics_rec"]')

  

   
   

    
/*     function setErrorFor(input, message) {
        input
        input.innerText = ""
        input.classList.add('is-invalid_create')
        small = `<small class="text-danger__Create">${message}</small>`
        input.innerText = small
        
    } */
    function setErrorFor(input, message) {
        input.classList.add('is-invalid_create')
       ...