JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="pre"></pre>

JavaScript

var pieces = ['small_square', 'big_square', 'vertical', 'horizontal'];

var board = [
  false, false, false, false,
  false, false, false, false
];

var N = 0;

run(0, board);

function is_possible(piece, spot, board) {
  if (piece === 'small_square') {
    return !board[spot];
  }
  if (piece === 'big_square') {
    return spot < 3 && !board[spot] && !board[spot + 1] && !board[spot + 4] && !board[spot + 5];
  }
  if (piece === 'vertical') {
    return spot < 4 && !board[spot] && !board[spot + 4];
  }
  if (piece === 'horizontal') {
    return spot % 4 < 3 && !board[spot] && !board[spot + 1];
  }
}

function insert(piece, spot, board) {
  board = board.concat();
  if (piece === 'small_square') {
    board[spot] = 'o';
  }
  if (piece === 'big_square') {
    board[spot] = board[spot + 1] = board[spot + 4] = board[spot + 5] = '#';
  }
  if (piece === 'vertical') {
    board[spot] = board[spot + 4] = '|';
  }
  if (piece === 'horizontal') {
    board[spot] = board[spot + 1] = '-';
  }
  return board;
}

function is_valid(board) {
  for (var i = 0; i < board.length; ++i) {
    if (!board[i]) {
      return false;
    }
  }
  return true;
}


function run(spot, board) {
  if (spot === 8) {
    if (is_valid(board)) {
      board.splice(4, 0, '\n    ');
      N++;
      document.getElementById('pre').innerHTML += 
        (N < 10 ? '0' : '') + N + ') ' +
        board.join('') + '\n\n';
    }
    return;
  }

  for (var i = 0; i < pieces.length; ++i) {
    var piece = pieces[i];

    if (is_possible(piece, spot, board)) {
      run(spot + 1, insert(piece, spot, board));
    }
  }

  if (board[spot]) {
    run(spot + 1, board);
  }
}